javascript - knockout 无法处理绑定(bind) "foreach"

Question

我是 Knockout 的新手，我正在构建一个实际上是大型计算器的应用程序。到目前为止，我在一页上运行了两个 knockout 实例。一个实例运行良好，但另一个完全损坏并且似乎根本无法注册？

下面是我的 Javascript，fetchYear 是运行良好的函数，而 fetchPopulation 是完全损坏的函数。它似乎根本没有从 HTML 中注册“ageview”，我想不通。

错误:

Uncaught ReferenceError: Unable to process binding "foreach: function (){return ageView }" Message: ageView is not defined

提前致谢。

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:

<div class="row" data-bind="foreach: yearView">
    <div class="grid_6">
        <img src="assets/img/index/calendar.png" width="120" height="120" />
        <select class="s-year input-setting" data-bind="options: $parent.yearSelect, optionsText: 'year', value: chosenYear"></select>
        <label for="s-year">Start year for the model analysis</label>
    </div>
    <div class="grid_6">
        <img src="assets/img/index/clock.png" width="120" height="120" />
        <select class="s-horizon input-setting" data-bind="options: horizon, value: horizon"></select>
        <label for="s-horizon">Analysis time horizon</label>
    </div>
</div>

<div class="row" data-bind="foreach: ageView">
    <div class="grid_6">
        <img src="assets/img/index/calendar.png" width="120" height="120" />
        <select class="s-year input-setting" data-bind="options: ageSelect, optionsText: 'age', value: chosenAge"></select>
        <label for="s-agegroup">Age group of <br> target population</label>
    </div>
    <div class="grid_6">
        <img src="assets/img/index/clock.png" width="120" height="120" />
        <input class="s-population input-setting"></input>
        <label for="s-population">Size of your patient <br> population <strong>National</strong> </label>
    </div>
</div>

Answer 1

当您执行此操作时(在 fetchYear 中):

ko.applyBindings(new YearViewModel(yearData));

您正在将整个页面与 YearViewModel View 模型绑定(bind)。但是 YearViewModel 没有名为 ageView 的属性，因此您会收到错误消息，并且 knockout 会停止尝试绑定(bind)任何其他内容。

您需要做的是通过将您想要的元素传递给 ko.applyBindings 来限制您的绑定(bind)只覆盖 dom 的一部分。例如:

<div class="row" id="yearVM" data-bind="foreach: yearView">
//....
<div class="row" id="popVM" data-bind="foreach: ageView">

然后:

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

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

另一种选择是将您的两个 View 模型作为父 View 模型的一部分，然后您可以将绑定(bind)应用到整个页面。如果您需要混合来自两个 VM 的部分并且它们在页面的不同部分中不方便分开，这会更容易。像这样的东西:

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

ko.applyBindings(myParentVM);

然后你会像这样声明你的绑定(bind):

<div class="row" data-bind="foreach: yearVM.yearView">