合併條件性敲除和數據綁定

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>