淘汰赛无法处理绑定“foreach”

我是Knockout的新手，我正在构建一个实际上是大型计算器的应用程序。 到目前为止，我在一个页面上运行了两个淘汰赛实例。 一个例子工作得非常好，但是另一个例子完全坏了，似乎根本就没有注册？

下面是我的Javascript，fetchYear是完全正常工作的函数，fetchPopulation是完全破坏的那个。 它似乎没有从HTML中注册“ageview”，我无法弄清楚。

错误：

未捕获的ReferenceError：无法处理绑定“foreach：function（）{return ageView}”消息：未定义ageView

提前致谢。

JS：

var index = { fetchYear: function () { Item = function(year){ var self = this; self.year = ko.observable(year || ''); self.chosenYear = ko.observable(''); self.horizon = ko.computed(function(){ if(self.chosenYear() == '' || self.chosenYear().horizon == undefined) return []; return self.chosenYear().horizon; }); }; YearViewModel = function(yeardata) { var self = this; self.yearSelect = yeardata; self.yearView = ko.observableArray([ new Item() ]); self.add = function(){ self.yearView.push(new Item("New")); }; }; ko.applyBindings(new YearViewModel(yearData)); }, fetchPopulation: function () { popItem = function(age){ var self = this; self.age = ko.observable(age || ''); self.chosenAge = ko.observable(''); self.population = ko.computed(function(){ if(self.chosenAge() == '' || self.chosenAge().population == undefined) return []; return self.chosenAge().population; }); }; PopulationViewModel = function(populationdata) { var self = this; self.ageSelect = populationdata; self.ageView = ko.observableArray([ new popItem() ]); self.add = function(){ self.ageView.push(new popItem("New")); }; }; ko.applyBindings(new PopulationViewModel(populationData)); } } index.fetchYear(); index.fetchPopulation(); 

HTML：

 
 
   Start year for the model analysis 
 
   Analysis time horizon 
 
 
 
   Age group of 
 target population 
 
   Size of your patient 
 population National  
  

Answer 1

当你这样做（在fetchYear ）：

 ko.applyBindings(new YearViewModel(yearData)); 

您使用YearViewModel视图模型绑定整个页面。 但是YearViewModel没有一个名为ageView的属性，所以你得到错误并且淘汰停止尝试绑定其他任何东西。

你需要做的是通过将你想要的元素传递给ko.applyBindings来限制你的绑定只覆盖部分dom。 例如：

 
 //.... 
 

然后：

 ko.applyBindings(new YearViewModel(yearData), document.getElementById("yearVM")); //... ko.applyBindings(new PopulationViewModel(populationData), document.getElementById("popVM")); 

现在，您的绑定仅限于实际显示该模型中的内容的DOM部分。

另一种方法是将两个视图模型作为父视图模型的一部分，然后您可以将绑定应用于整个页面。 如果您需要混合来自两个VM的部件，并且在页面的不同部分中不方便地将它们分开，这将使其更容易。 就像是：

 var myParentVM = { yearVM : index.fetchYear(), // note, make this return the VM instead of binding it popVM : index.fetchPopulation(), // ditto } ko.applyBindings(myParentVM); 

然后你就像这样声明你的绑定：

Answer 2

这不起作用的主要原因是因为你在一个页面上不止一次调用ko.applyBindings（）（这不是真的被禁止但在我看来是一个不好的做法）。

如果需要调用它两次，则必须使用容器调用它，该容器适用于此绑定的区域。

像这样的东西：

 ko.applyBindings(new YearViewModel(yearData), document.getElementById('YourYearViewElementId')); 

您得到的错误来自第一个绑定，它尝试处理整个页面，但在其ViewModel中找不到“ageView”。

如果您为单个页面构建单个ViewModel，那么如果需要，您可以使用子模型。

这种情况的一些伪代码：

 var Section1ViewModel = function() { var self = this; self.property1 = ko.observable(); self.myComputed = ko.computed(function () { // do some fancy stuff }); self.myFunc = function() { // do some more fancy stuff }; } var Section2ViewModel = function() { var self = this; self.property1 = ko.observable(); self.myComputed = ko.computed(function () { // do some fancy stuff }); self.myFunc = function() { // do some more fancy stuff }; } var PageViewModel = function() { var self = this; self.section1 = ko.observable(new Section1ViewModel()); self.section2 = ko.observable(new Section2ViewModel()); self.myGlobalFunc = function() { // do some even more fancy stuff } } ko.applyBindings(new PageViewModel()); 

希望有所帮助。

最好的问候，克里斯