淘汰if else声明

Question

我使用css和knockout.js(绑定)制作了如下图表图表

根据数据的值,我需要通过选择不同的css类来调整条形的高度.

我试过使用下面的敲除if语句:

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

但是,这不符合我的要求,因为我需要以下内容:

     <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>

有人可以建议任何替代品？

谢谢.

Answer 1

将计算的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 }"> 

如果您正在处理一个对象数组,您可以将计算的observable添加到这些对象,或者您可以将正常函数添加到视图模型并在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