Question

我有一个对象数组，其中每个对象代表视图视图的数据。我想为每个对象启动一组属性，以便我可以轻松地从一个函数添加到对象上。我这样做的方式是这样的。

var createViewProperties = function () {
        return {
            rightContentVisibility: ko.observable(true) // normally false, true for testing
        };
    };

var data= [
   {
     headline: "Are you interested in helping others?",
     viewProperties: new createViewProperties(),
   },
   {
     headline: "This is a second modal view",
     viewProperties: new createViewProperties(),
   }
];

然后我找到了我想要显示的正确对象并更新了视图模型的对象。在HTML中，我像这样绘制视图。

<div data-bind="with: currentView">
     <div data-bind="css: $data.headline" class="cover-img"></div>
     <div data-bind="$data.viewProperties.rightContentVisibility"></div>
</div>

然而，浏览器将.rightContentVisibility视为未定义，我是否未正确实例化这些对象？当我在对象上暂停调试器时，它似乎拥有整个可观察的.viewProperties，但是只要它进入dom就不知道它是什么，这里出了什么问题？

Answer 1

如果你这样做，那么代码应该没有任何错误。检查您的ko.applyBindings()电话 - 也许您有错误。

var createViewProperties = function () {
        return {
            rightContentVisibility: ko.observable(true) // normally false, true for testing
        };
    };

var data = [
   {
     headline: "Are you interested in helping others?",
     viewProperties: new createViewProperties(),
   },
   {
     headline: "This is a second modal view",
     viewProperties: new createViewProperties(),
   }
];

ko.applyBindings({ currentView: data });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="with: currentView">
     <div data-bind="css: $data.headline" class="cover-img"></div>
     <div data-bind="$data.viewProperties.rightContentVisibility"></div>
</div>

Answer 2

您的代码无效的原因是您使用createViewProperties关键字呼叫new。在JavaScript中的方法调用之前使用new将this的上下文设置为当前函数，并从该函数隐式返回this。从您对new的通话中移除createViewProperties，一切正常。

var data = [
 {
    headline: "Are you interested in helping others?",
    viewProperties: createViewProperties(),
 },
 {
    headline: "This is a second modal view",
    viewProperties: createViewProperties(),
 }
];

编辑

或者你可以像这样使用new：

var createViewProperties = function () {
       this.rightContentVisibility = ko.observable(true);       
};

然后按照你一直这样做的方式新建它。请注意，约定是在JavaScript中使用大写字符表示使用new关键字调用的方法名称。 “构造函数”方法的名称通常也是面向对象语言中的名词。所以更好的是

var ViewProperties = function() { /* etc etc */ };

那就是说，返回一个像你正在做的匿名对象并没有错。

淘汰赛 - 对象和视图的数组，正确的方式？

2 个答案: