gpt4 book ai didi

knockout.js - knockout if else 声明

转载 作者:行者123 更新时间:2023-12-04 21:53:32 28 4
gpt4 key购买 nike

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

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

谢谢。

最佳答案

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

关于knockout.js - knockout if else 声明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10718666/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com