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>');

从根本上说，我需要初始化处理程序。我是否需要删除所有绑定，然后重新应用？

fiddle

Answer 1

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

查看工作示例here in this fiddle

在你的情况下，你必须做这样的事情：

<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>');
 }

//您还可以使用视图模型实例

从视图模型访问

Fiddle

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

fiddle

2 个答案: