敲除如果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语句

回答

相关问题