knockout.js - knockout if else 声明

Question

我有一个使用css和knockout.js(绑定(bind))制作的图表，如下所示

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

我尝试使用下面的 knockout 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 类的 View 模型中，然后使用“attr”绑定(bind) (http://knockoutjs.com/documentation/attr-binding.html)。

或者使用“css”绑定(bind)——但这需要您在 View 文件中拥有整个选择逻辑。

示例代码:

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

    // ....

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

在 View 中:

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

如果您正在处理一个对象数组，您可以将计算的 observable 添加到这些对象，或者您可以向 View 模型添加一个普通函数并在 foreach 循环期间调用它。

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

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

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

在 View 中:

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

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