Knockout js 将类绑定到函数的结果

发布于 2025-01-01 04:19:50 字数 410 浏览 1 评论 0原文

我正在使用knockout js根据表达式的结果设置元素的类，我想知道是否可以将类设置为从视图模型中的函数返回的值。

这就是我目前所拥有的并且有效：

<div data-bind="css: { highlightup : OneDayChange > 0 &&  SevenDayChange > 0}">
</div

我想要这样的东西：

<div data-bind="css: { bothValuesIncreasing(); }">
</div

编辑为了澄清起见，我希望该类由函数返回的值设置，但它可能不是布尔值，它可以是函数返回的任何字符串

原文

I am using knockout js to set the class of an element depending on the result of an expression, what I would like to know is if it is possible to set the class to the value returned from a function in the view model.

This is what i have at the moment and works:

<div data-bind="css: { highlightup : OneDayChange > 0 &&  SevenDayChange > 0}">
</div

I would like to have somthing like:

<div data-bind="css: { bothValuesIncreasing(); }">
</div

Edit
for clarification i would like the class to be set by the value returned from the function, but it may not be a boolean value, it could be any string the function returns

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2025-01-08 04:19:50

您需要使用计算属性。

var vm = function(){
  var self = this;
  self.OneDayChange = ko.observable();
  self.SevenDayChange = ko.observable();
  self.isBothValue = ko.computed(function(){
    return self.OneDayChange() > 0 && self.SevenDayChange() > 0;
  });
}

<div data-bind="css: { highlightup: isBothValue() }">
</div

不要害怕使用这些属性来查看特定操作。这就是创建的视图模型。

响应更新：
自定义绑定将是解决这个问题的最佳选择。

实际上我在KnockoutJs google groups

绑定 - https://github.com/SteveSanderson/knockout/wiki/Bindings---class

演示 - http://jsfiddle.net/mbest/NBmjh/

You need to use computed properties.

var vm = function(){
  var self = this;
  self.OneDayChange = ko.observable();
  self.SevenDayChange = ko.observable();
  self.isBothValue = ko.computed(function(){
    return self.OneDayChange() > 0 && self.SevenDayChange() > 0;
  });
}

<div data-bind="css: { highlightup: isBothValue() }">
</div

Don't afraid to use those properties for view specific actions. Thats what viewmodels created are.

Responding to update:
Custom binding would be a best choise for solving this problem.

Actually I found an answer on KnockoutJs google groups

Bindings - https://github.com/SteveSanderson/knockout/wiki/Bindings---class

Demo - http://jsfiddle.net/mbest/NBmjh/

回复收藏 0 原文

往事随风而去 2025-01-08 04:19:50

通常的方法是将此逻辑移至 viewModel 并使用 dependentObservables

viewModel.isHighlightup = ko.dependentObservable(function() {
    return this.OneDayChange > 0 && this.SevenDayChange > 0
}, viewModel);

<div data-bind="css: { highlightup : isHighlightup }"></div>

Ryan 在他的文章中对此进行了精彩的解释 http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html

Usual way of doing this is move this logic to viewModel and use dependendObservables

viewModel.isHighlightup = ko.dependentObservable(function() {
    return this.OneDayChange > 0 && this.SevenDayChange > 0
}, viewModel);

<div data-bind="css: { highlightup : isHighlightup }"></div>

Ryan has explained it brilliantly in his post http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html

回复收藏 0 原文

~没有更多了~