Question

嗨我想知道如果条件满足，敲除/数据绑定是否可以有条件地将类添加到元素

现在我有类似

的东西

    <!-- ko if: ($index() % 2 != 0) -->
    <div class="col-md-5 pull-left" style="margin: 0px 5px 10px 5px; min-height: 60px">
       ...
    </div>
    <!-- /ko -->
    <!-- ko if: ($index() % 2 == 0) -->
    <div class="col-md-5 pull-right" style="margin: 0px 5px 10px 5px; min-height: 60px">
       ...
    </div>
    <!-- /ko -->

随着......成为一堆代码。这很糟糕，因为在2个代码块中只有一条带有“向右拉”和“向左拉”的行不同。

有没有办法只改变那一行代码，或者这是不可能的。

谢谢詹姆斯

Answer 1

您可以使用css绑定：http://knockoutjs.com/documentation/css-binding.html

<div class="col-md-5" style="margin: 0px 5px 10px 5px; min-height: 60px" 
     data-bind="css: {  'pull-left': ($index() % 2 != 0), 
                        'pull-right': ($index() % 2 == 0) }">
       <!-- ... -->
</div>

Answer 2

是的，请参阅文档中的this page。

但你最好的选择可能是你的视图模型中有一个属性应该应用的类（可能在ko.computed中），这样你就不必让那个逻辑搞乱了你的观点。

例如，我假设上面的代码是foreach绑定，并且这些项是某种类型的子模型。你可以这样做：

self.myCollection = ko.observableArray();    // your original collection
self.myStyledCollection = ko.computed(function() {
    return self.myCollection().map(function(currItem,idx) {
        return { item : currItem, cssClass : idx % 2 ? "pull-left" : "pull-right" };
    });
});

然后你可以绑定它：

<div data-bind="foreach: myStyledCollection">
    <div data-bind="css: cssClass">
    ...
    </div>
</div>

结合条件淘汰和数据绑定

2 个答案: