[英]Knockout.js - “value” binding within an “html” binding
我正在开发一个需要根据某些值动态生成HTML的应用程序。 我将以下代码放到动态HTML所在的位置:
<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\'\' />' }
当我运行该应用程序时,没有任何错误,并且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。
您有2个选项:-使用Wayne注释的模板,(推荐)-如果您确实想从可观察对象生成html并绑定ViewModel,则可以使用自定义绑定。 您实际上是在这里创建一些自定义模板系统。
HTML:
<div data-bind="htmlTemplate:html"></div>
bindinghandler:
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: http : //jsfiddle.net/martijn/6b87vw3L/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.