【问题标题】:Toggle CSS class KnockoutJS切换 CSS 类 KnockoutJS
【发布时间】:2012-10-29 09:49:41
【问题描述】:

我有月份链接

<ul data-bind="foreach: factMonthes">
    <li data-bind="click: $root.changeFactMonth, css:{'selected-month': num == $root.activeFactMonth()}">
</ul>

我想禁用所有链接的“选定月份”类,活动除外,并在点击后启用活动。当然,我可以在我的方法 changeFactMonth() 中禁用类,但是我可以通过淘汰绑定来做到这一点吗?

function FactMonth(num){
    this.num = num;
    this.name = MonthesNames[num - 1];
    this.active = false;
}

function ViewModel() {

    self.factMonthes = ko.observableArray();       
    self.activeFactMonth = ko.observable(new Date().getMonth() + 1);

    for(var i = 1; i <= 12; i++)
    {
        var month = new FactMonth(i);
        month.active = self.activeFactMonth() == i;
        self.factMonthes.push(month);
    }
}

【问题讨论】:

  • 您的绑定文本中有一个额外的)activeFactMonth())
  • 不是真正的代码,语法错误不重要

标签: javascript binding knockout.js


【解决方案1】:

如果 month_num 是一个 observable,那么你需要解开它:

<li data-bind="
  click: $root.changeFactMonth, 
  css:{'selected-month': month_num() == $root.activeFactMonth()}
">

只有在不将 observables 用作表达式的一部分时,才能直接使用它们。由于比较 (==) 是一个表达式,因此您必须使用基础值,即您必须调用 observable。

【讨论】:

  • 不,月数不可观察。 Object Factmonth 是可观察的。请看我的帖子更新。
  • @Ozerich 只需将FactMonthactive 属性设为可观察的(this.active = ko.observable(false);)。将你的 css 绑定到那个 observable (data-bind="css: {'selected-month': active }")。完毕。当然别忘了修改changeFactMonth(),让它不做month.active = true;,而是month.active(true);
  • 是的,没错。 Css 在月份活跃时启用,但 CSS 类在将属性设置为 false 后不会删除;
猜你喜欢
  • 1970-01-01
  • 2018-04-13
  • 2019-04-25
  • 1970-01-01
  • 1970-01-01
  • 2016-10-28
  • 1970-01-01
  • 1970-01-01
  • 2017-01-15
相关资源
最近更新 更多