敲除模板绑定无法完全工作

Question

我使用的是带有敲除功能的javascript模板。

<div data-bind="template: { name: 'treeElement', foreach: results }">'

<script type=text/html>
<!--ko if: a>b -->
<div data-bind={textcontent:a}/>`
<!--/ko-->
</script>

类似上面的。。我正在使用值为的textconten获取显示的div元素，但是没有应用无容器绑定。。a> b没有计算。所以它只是忽略了语法。。

Answer 1

• 当您在注释绑定中编写类似属性的名称时您需要执行它们，以便将它们解析为结果目前您只是比较两个函数。

• 此外，您的标记是无效的，因为您的两个div标记都不是闭合并以有线单引号结尾，这会导致绑定失败。

• 在被称为textcontent的敲除中存在这种结合。

如果您将html更改为：

<div data-bind="template: { name: 'treeElement', foreach: results }"></div>
<script type="text/html" id="treeElement">
<!--ko if: a() > b() -->
<div data-bind="text: a() + ' is bigger than ' + b()"/></div>
<!--/ko-->
</script>

我们假设你有一个类似于我构建的场景的视图模型，它是：

var treeElements = [
{"a" : 2 , "b" : 1},
{"a" : 4 , "b" : 6},
{"a" : 9 , "b" : 5},
{"a" : 2 , "b" : 7},
{"a" : 4 , "b" : 9},
]
function treeElement(data){
this.a = ko.observable(data.a);
this.b = ko.observable(data.b);
}
function viewmodel(){
var self = this;
self.results = ko.observableArray();
self.init = function(){
ko.utils.arrayForEach(treeElements, function(item){
self.results.push(new treeElement(item));
});
}
}
var myVM = new viewmodel();
myVM.init();
ko.applyBindings(myVM);

你应该准备好了。

这也是一个工作小提琴