Javascript js不会将两个模板和viewmodels绑定到同一页面

这是我的标记：

<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>

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

---

我确信我需要以不同的方式执行，我只是不知道如何执行。我的目标是让多达10-15个视图模型在同一页面上呈现不同的模板。

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

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>

Artem的答案可能是更好的方法，但你还有另一个选择。您可以调用

applyBindings

，并使用第二个参数指定要定位的元素

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

这将允许在页面上绑定多个viewmodels

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