javascript - 如何让 KnockOutJS 识别具有数据绑定属性的动态 html？

Question

我有一个应用程序，我在其中将内容动态加载到页面的某些部分。有时代码具有data-bind属性，这些属性似乎被 KnockOutJS 忽略了。

HTML：

<div data-bind="html: code">
    this text is replaced by the JavaScript
</div>

function AppView() {
    var self = this;

    // This sets the code 
    self.code = ko.observable('<div>this shouldnt show</div>');
    self.stuff = ko.observable('this should show');
}

var app = new AppView();
ko.applyBindings(app);

// Later we override the code.  We're setting an observable, so the app should notice.
app.code('<div data-bind="text: stuff">this shouldnt show either</div>');

本质上，我需要初始化处理程序。我是否需要删除所有绑定并重新申请？

小提琴

Answer 1

这可以通过 knockuot 模板绑定来完成。

在这个小提琴中看到一个工作示例

在您的情况下，您必须执行以下操作：

<div data-bind="template: 'myTemplate'>
    this text is replaced by the JavaScript
</div>

<script id="myTemplate" type="text/html">
   <div data-bind="text: stuff">this shouldnt show either</div>
</script>

检查它是否有效。

Answer 2

无需删除所有绑定并重新申请。

您可以更改事件处理程序中的值

<div data-bind="html: code>
this text is replaced by the JavaScript
</div>
<span data-bind="click: changeClicked">Change</span>

//模型内部

 self.changeClicked = function(){
 self.code('<div data-bind="text: stuff">this shouldnt show either</div>');
 }

//您也可以使用视图模型实例从视图模型访问

小提琴