Javascript Knockout.js-“文件”;“价值”;在“文件”中具有约束力;html";结合
我正在开发一个需要根据特定值动态生成HTML的应用程序。我有下面的代码,我希望动态HTML进入其中:Javascript Knockout.js-“文件”;“价值”;在“文件”中具有约束力;html";结合,javascript,html,data-binding,knockout.js,Javascript,Html,Data Binding,Knockout.js,我正在开发一个需要根据特定值动态生成HTML的应用程序。我有下面的代码,我希望动态HTML进入其中: <div data-bind="html: extraHTML"></div> 我在javascript文件中有一个对象设置,其中包含各种HTML代码块,一旦应用程序启动,就会选择这些代码块。例如,其中一个对象包含以下内容: { type: 'Int', html: '<input style=\'margin: 0\'type=\'number\' min=
<div data-bind="html: extraHTML"></div>
我在javascript文件中有一个对象设置,其中包含各种HTML代码块,一旦应用程序启动,就会选择这些代码块。例如,其中一个对象包含以下内容:
{ type: 'Int', html: '<input style=\'margin: 0\'type=\'number\' min=\'0\' data-bind=\'value: selectedExtra, valueUpdate: \'input\'\' />' }
{type:'Int',html:'}
当我运行应用程序时,我没有得到任何错误,HTML被正确绑定。但是,当我在输入字段中插入一个值时,可观察的“selectedExtra”不会更新。当我将包含“html”绑定的div标记替换为以下内容时:
<input style="margin: 0" type="number" min="0" data-bind="value: selectedExtra, valueUpdate: 'input'">
可观察到的更新可以很好地执行此操作。我想知道的是,在“html”绑定中是否存在动态分配“值”绑定并实际更新该值的方法。也许我错过了另一个解决方案
任何帮助都将不胜感激,谢谢
更新
我创建了一个jsfiddle来演示这个问题。当您调用applyBindings时,ko遍历dom节点以“绑定”到元素。html是生成的,因此这些元素永远不会调用ko.applyBindings 您有两种选择: -使用wayne评论的模板(推荐) -如果您确实希望从可观察对象生成html并绑定ViewModel,则可以使用自定义绑定。实际上,您正在这里创建一些自定义模板系统 html:
<div data-bind="htmlTemplate:html"></div>
ko.bindingHandlers.htmlTemplate = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// NOTE: you could return false and ommit the update code, it probably works, but this way you have more control what happens when the html is updated
return { controlsDescendantBindings:true };
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// remove old bindings
ko.cleanNode(element);
// update the inner html, unrwap to support observables and/or normal properties
element.innerHTML=ko.unwrap(valueAccessor());
// apply the view model to the content of the element
ko.applyBindingsToDescendants(viewModel,element);
}
};
JSFIDDLE:
我最近没有太多机会提问,如果您有任何关于问题格式的提示,我也会非常感激。我认为您需要使用INSTEAD作为将来的参考。我建议您创建一个演示您的问题的工具,因为它可以让您的问题更容易解决answering@WayneEllery谢谢你的提示,我已经添加了它作为更新。