0

我正在使用带有淘汰赛的javascript模板。

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

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

类似于上面的东西..我正在显示带有 textcontetn 的 div 元素，其值为 a 但是没有应用无容器绑定.. a>b 没有计算。所以它只是忽略语法..

4

1 回答 1

0

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

  • 此外，您的标记无效，因为您的两个 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);

你应该很高兴。

这也是一个工作小提琴

于 2014-01-12T23:39:50.877 回答