javascript - Knockout.js 不会将两个模板和 View 模型绑定(bind)到同一页面

Question

这是我的标记:

<section id="Application">
    <!-- ko ifnot: initialized -->
    <span>Loading...</span>
    <!-- /ko -->
    <ul data-bind="template:{name: 'clientList', foreach:clients}">
    </ul>

    <ul data-bind="template:{name: 'storyList', foreach:stories}">
    </ul>
</section>

这是我的模板(它们在单独的文件中):

function IncompleteStoriesViewModel() {
//data
var self = this;
self.initialized = ko.observable(false);
self.stories = ko.observableArray();
(function () {
    $.ajax({
        url: lucidServer.getIncompleteStory(1),
        success: function (data) {
            ko.mapping.fromJS(data, {}, self.stories);
            self.initialized(true);
        }
    });
})();
};

ko.applyBindings(new IncompleteStoriesViewModel());


function ClientViewModel() {
//data
var self = this;
self.initialized = ko.observable(false);
self.clients = ko.observableArray();
(function () {
    $.ajax({
        url: lucidServer.getClients(1),
        success: function (data) {
            ko.mapping.fromJS(data, {}, self.clients);
            self.initialized(true);
        }
    });
})();
};

ko.applyBindings(new ClientViewModel());

我的模板文件很好，如果我在 html 中调用一个或另一个，它们各自独立工作，但是当我尝试让它们都显示时，只有第一个呈现，第二个抛出错误“未定义故事”或“未定义客户”

我确定我需要以不同的方式执行此操作，但我不知道该怎么做。我的目标是让多达 10-15 个 View 模型在同一页面上呈现不同的模板。

Answer 1

您必须创建一个包含所有 View 模型的 View 模型:

function ViewModel(){
    var self = this;

    self.clientViewModel = new ClientViewModel();
    self.storyViewModel = new IncompleteStoriesViewModel();
}

然后将绑定(bind)应用于整个页面:

ko.applyBindings(new ViewModel());

并相应地调整 html:

<section id="Application">
    <ul data-bind="template:{name: 'clientList', foreach: clientViewModel.clients}">
    </ul>

    <ul data-bind="template:{name: 'storyList', foreach:storyViewModel.stories}">
    </ul>
</section>