Knockoutjs 和动态更改模板答案

【问题标题】：Knockoutjs and changing template dynamicallyKnockoutjs 和动态更改模板
【发布时间】：2014-06-23 06:12:06
【问题描述】：

我使用带有模板插件的 knockoutjs (Using Underscore Template with Knockout using interpolate due to asp.net) 如果我有一个标题和一个列表：

<ul data-bind="template: { name: 'people' }"></ul>
<script type="text/html" id="people">
    <h2>{{= hdr}}</h2>
    {{ _.each(people(), function(item) { }}
        <li>{{=item.name }} ({{=item.age }})</li>
   {{ }); }}
</script>

也是一个按钮

<button id="bindclick">Click</button>

还有一个我使用淘汰赛的 ja 代码：

ko.applyBindings({
    hdr: "People",
    people: ko.observableArray([{name:"name1",age: 45},{name:"name2",age: 33}])
});

怎么做，可以通过单击按钮而不是“未捕获的错误：您不能将绑定多次应用于同一元素。”来更改模板值？：

$("#bindclick").click(function() {
    ko.applyBindings({
        hdr: "People2",
        people: ko.observableArray([{name:"name1",age: 45}])
    });
});

谢谢

【问题讨论】：

Dynamically Changing Templates in KnockoutJS

标签： javascript knockout.js

【解决方案1】：

您应该只需要对模型对象调用一次 applyBindings。

稍后在您的点击处理程序中，您只需更新您的模型。

例如：

var theModel = {
    hdr: ko.observable('People'),
    people: ko.observableArray([{name:"name1",age: 45},{name:"name2",age: 33}])
};

ko.applyBindings(theModel);

$('#bindclick').click(function () {
    theModel.hdr('People2');
    theModel.people([{name:"name1",age: 45}]);
});

更新模型应该会更新您之前绑定的内容。

【讨论】：