javascript-Knockoutjs:动态内容和applyBindings
作者:互联网
我是“动态地”填充我的页面,如下所示:
<script type="text/html" id="ContainerTemplate">
<span data-bind="template: {
name: contentTemplate,
data: contentData }"></span>
</script>
<script type="text/html" id="fooTemplate">
<span data-bind="text: barAttribute"></span>
</script>
<button data-bind="click: complete">complete</button>
Hello
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span>
!
ViewModel:
var viewModel = {
myContents: ko.observableArray([]),
complete: function() {
viewModel.myContents.push({
contentTemplate:'fooTemplate',
contentData:{barAttribute:'world'}});
}
};
ko.applyBindings(viewModel);
特殊之处在于模板名称是动态的.它看起来像这样工作(您可以在http://jsfiddle.net/hPQNx/上尝试一下),但是我想知道自己是否做对了.某些模板功能(例如root或parent)似乎不起作用.
我是否应该在某个时候手动调用applyBindings?我已经看到必须在相关的DOM节点上完成此操作,但是如何在设置中访问这些节点?
解决方法:
我在视图模型中添加了一个属性,并展示了如何添加根属性并使用$root引用它,而$parent可以在此工作中工作.
var viewModel = {
a: ko.observable('foo'),
myContents: ko.observableArray([]),
complete: function() {
viewModel.myContents.push({
contentTemplate: 'fooTemplate',
b: 'goo',
contentData: {
barAttribute: 'world'
}
});
}
};
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script type="text/html" id="ContainerTemplate">
<span data-bind="template: {
name: contentTemplate,
data: contentData }"></span>
</script>
<script type="text/html" id="fooTemplate">
<span data-bind="text: barAttribute"></span>
<div data-bind="text: $root.a"></div>
<div data-bind="text: $parent.b"></div>
</script>
<button data-bind="click: complete">complete</button>
Hello
<span data-bind="template: { name: 'ContainerTemplate', foreach: myContents }"></span>
!
标签:knockout-js,javascript,jquery 来源: https://codeday.me/bug/20191201/2084470.html