敲除数据结合CSS IF功能

Question

如果页面的标题包含" home"，我想在元素中添加一个类。目前，我使用此：

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

但是这不起作用，此功能不会被执行...我如何使这项工作？

Answer 1

敲除以相似的方式将值包裹在计算功能中：

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

在您的情况下，您输入了一个函数，这将导致" Truethy"值设置active类。您可以通过：

来解决此问题

选项1（快速）：不要将其包装在功能

中

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

选项2（不建议）：修复错字（funciton）并调用函数

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

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

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被认为是"不良练习" ...但是在这种情况下，我想您可以摆脱它...

请注意，由于不使用可观察的值，因此您的类更改document.title。