4

我有一个使用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>

有人可以提出任何替代方案吗？

谢谢。

4

2 回答 2

13

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

于 2012-05-23T11:12:04.707 回答
3

你可以只使用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>

顺便说一句，我确定这只是伪代码，但值永远不会 >= 300 AND <= 250，并且您需要使用 && 而不是 'and'，所以我更改了小提琴的表达式，因此 200-249 将是红色的250-300 是蓝色的。

于 2012-05-23T20:16:45.630 回答