敲除 data-bind css if 函数

Question

如果页面标题包含 "Home"，我想向元素添加 class。目前，我使用这个：

<li data-bind="css: { 'active': function(){return document.title.indexOf('Home') > -1;}}">

但是这不起作用，这个函数没有被执行... 我该怎么做？

Answer 1

Knockout 以类似于以下的方式将值包装在计算函数中：

Input: "yourClassName": whateverYouPutIn
Output: "yourClassName": ko.computed(function() { return whateverYouPutIn; })

在你的例子中，你输入了一个函数，这将导致 "truethy" 值设置为 active class。您可以通过以下方式解决此问题：

选项 1（快速）：不要将其包装在函数中

<li data-bind="css: { 
    'active': document.title.indexOf('Home') > -1
  }"></li>

方案二（不推荐）：修正拼写错误（`funciton`）并调用函数

<li data-bind="css: { 
    'active': (function() {
      return document.title.indexOf('Home') > -1;
     }())
  }"></li>

选项 3：将这些类型的属性添加到您的视图模型

var vm = {
  // set when VM is initialized
  isActive: document.title.indexOf("Home"), 
  // if you want to check the title during data-binding
  isActiveDuringBind: function() {
    return document.title.indexOf("Home");
  }
}

两者之一

<li data-bind="css: {'active': isActive }"></li>

或

<li data-bind="css: {'active': isActiveDuringBind() }"></li>

请注意，在自定义绑定之外使用 DOM api 被视为 "bad practice"...但在这种情况下，我想您可以摆脱它...

请注意，因为没有使用可观察值，所以当您更改 document.title 时，您的 class 不会切换。

敲除 data-bind css if 函数

Knockout data-bind css if function

html

data-binding

element

class

knockout.js

选项 1（快速）：不要将其包装在函数中

方案二（不推荐）：修正拼写错误（`funciton`）并调用函数

选项 3：将这些类型的属性添加到您的视图模型

敲除 data-bind css if 函数

Knockout data-bind css if function

html

data-binding

element

class

knockout.js

选项 1（快速）：不要将其包装在函数中

方案二（不推荐）：修正拼写错误（funciton）并调用函数

选项 3：将这些类型的属性添加到您的视图模型

方案二（不推荐）：修正拼写错误（`funciton`）并调用函数