敲除如果else語句

我的座標圖像使用CSS和knockout.js下面進行（結合）敲除如果else語句

根據數據的價值，我需要尺寸的杆的高度，通過選擇不同的CSS類。

我試圖用基因敲除if語句如下：

 <ul data-bind="foreach: ArrayData"> 
     <!-- ko if: value >= 300 and value <=250 --> 
      <li class="height300Css"> 
     <!-- /ko --> 
     <!-- ko if: value >= 200 and value <=300 --> 
      <li class="height200Css"> 
     <!-- /ko --> 
    </ul>

有人能提出任何：

The <!-- ko --> and <!-- /ko -->

然而，這並不因爲我需要像下面符合我的要求備擇方案？

謝謝。

來源

2012-05-23 Nil Pun

將計算出的observable添加到返回正確css類的視圖模型中，然後使用「attr」綁定（http://knockoutjs.com/documentation/attr-binding.html）。

或者使用「css」綁定 - 但這需要您在視圖文件中具有整個選擇邏輯。

示例代碼：

var ViewModel = function() { 
    var self = this; 

    // .... 

    self.cssClass = ko.computed(function() { 
     var value = self.value(); 
     if (value >= 300 && value <= 250) { 
      return 'height300Css'; 
     } 
     // ... 
    }; 
};

並在視圖：

<li data-bind="attr: { class: cssClass }">

如果你處理的對象的數組，你可以添加計算的可觀測到這些對象，或者你可以添加一個普通的函數到視圖模型並在foreach循環中調用它。

var ViewModel = function() { 
    var self = this; 

    self.items = ko.observableArray(...); 

    self.getCssClass = function(item) { 
     var value = item.value(); 
     // ... 
    }; 
};

並在視圖：

<li data-bind="attr: { class: $root.getCssClass($data) }">

演示：http://jsbin.com/awacew

來源

2012-05-23 11:12:04 Niko

謝謝你@Niko，如果它只是一個對象，它就可以工作。在我的情況下，它是一個對象數組。我首先在外部div上使用foreach。已經更新了這個問題。 –

因此，要麼擴展那些數組中的對象，要麼使用普通函數並移交當前項目。我要給我的答案添加一個例子！ – Niko

一個小的附加使用「attr：{'class'：$ root.getCssClass（$ data）}」，否則會導致IE <= 7中的錯誤。正如我記得這個問題計劃修復，但在2.0版本，它仍然存在。還沒有檢查2.1 – ILya

可你只需要使用CSS的結合？

<ul id="MyList" data-bind="foreach:list"> 
    <li> 
     <span data-bind="text: value, css: { height300Css: value >= 250 && value <= 300, height200Css: value >= 200 && value < 250 }"></span> 
    </li> 
</ul>

BTW我敢肯定，這只是僞代碼，但值不能> = 300 < = 250，你需要使用& &，而不是「和」，所以我改變了表述爲my fiddle所以200-249會是紅色的，250-300會是藍色的。

來源

2012-05-23 20:16:45

偉大的解決方案，但我不得不接受另一種解決方案，因爲它更可持續。 –

這是一個更好的方法。 IMO –

敲除如果else語句

回答

相關問題