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

Answer 2

你能使用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我确定它只是伪代码，但是值永远不会是＆gt; = 300 AND＆lt; = 250，你需要使用＆amp;＆amp;而不是'和'，所以我改变了my fiddle的表达式，所以200-249将是红色，250-300将是蓝色。

淘汰if else声明

2 个答案: