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个视图模型在同一页面上呈现不同的模板。

Answer 1

您必须创建一个包含所有视图模型的视图模型：

function ViewModel(){
    var self = this;

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

然后将绑定应用于整个页面：

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>

Answer 2

Artem的答案可能是更好的方法，但你确实有另一种选择。您可以调用applyBindings并使用第二个参数指定要定位的元素。

ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));

这将允许在页面上绑定多个视图模型。

Knockout.js不会将两个模板和视图模型绑定到同一页面

2 个答案: