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

【问题标题】：knockout - array of objects and view, right way?淘汰赛 - 对象数组和视图，正确的方式？
【发布时间】：2016-07-14 23:50:30
【问题描述】：

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

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，它就不知道它是什么，这里出了什么问题？

【问题讨论】：

标签： knockout.js

【解决方案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>

【讨论】：

【解决方案2】：

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

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 */ };

也就是说，像您这样返回匿名对象并没有错。

【讨论】：