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

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

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为undefined，我没有正确实例化这些对象吗？当我在对象上暂停调试器时，它看起来有整个可观察的.viewProperties，但是一旦它进入dom，它不知道它是什么，这里出了什么问题？

来源

2016-07-14 William Howley

如果你这样做，那么代码应该没有任何错误的工作。检查你的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>

来源

2016-07-14 14:36:48

你的代码是不工作的原因是因为你与new关键字调用createViewProperties。在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 */ };

这就是说，有什么不妥就像你正在做的，而不是返回一个匿名对象。

来源

2016-07-14 15:41:17

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

回答

相关问题