Question

我在我的项目中使用Knockout JS。我希望在应用所有绑定后包含模板。

示例：

<script type="text/javascript" src="ko.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<h2>Participants</h2>
<button onClick="addOnRuntime()">Insert</button>
<div id="ab">Click Me</div>

Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<div data-bind="template: { name: 'person-template', data: killer }"></div>

<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
   <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/javascript">
 function MyViewModel() {
     this.buyer = { name: 'Franklin', credits: 250 };
     this.seller = { name: 'Mario', credits: 5800 };
     this.killer = { name: 'Dj', credits: 10000 };
 }
 ko.applyBindings(new MyViewModel());
 function addOnRuntime()
 {
     $.ajax({
        dataType:'script',
        url:'/ab.html',
        error:function(jsc){
            var temp=document.getElementById("person-template");
            temp.innerHTML=jsc.responseText;
            ko.cleanNode(temp);
            ko.applyBindings(MyViewModel(),temp);
        },
        success:function(res){
        }
     });
 }
</script>

我想在上面的块中注入一个html。但是当我在其中注入html时，没有发生任何变化。我搜索了很多，看到我们需要先使用ko.cleanNode(viewModel)解除绑定，然后再使用ko.applyBindings(viewmodel)应用绑定，但仍然没有变化。

这是正在注入的html

<h1 data-bind="text: name"></h1>
<p>Credits: <span data-bind="text: credits"></span></p>

这是注入代码后的样子

<script id="person-template" type="text/html">
   <h1 data-bind="text: name"></h1>
   <p>Credits: <span data-bind="text: credits"></span></p>
</script>

Answer 1

尝试使用ko.applyBindingsToDescendants或ko.applyBindingsToNode添加新添加的html。 http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

如何在Knockout js中调用applyBindings后动态添加模板

1 个答案: