javascript - Knockout JS 声明式绑定(bind)内部如何工作

Question

我编写了一段代码，单击按钮即可显示或隐藏特定的 div。代码在 this fiddle 。 代码工作正常，但我的疑问是，当我在按钮单击时更改可观察的 a 和 b 的值时，那么 toShow 是怎么来的> 方法被调用？

只要我的“testViewModel”发生变化，它就会被调用吗？ 另外，什么时候我必须在 data-bind 中使用 () ？

HTML 代码:

<button data-bind="click: $root.changeValue">Click Me!</button>
 <div data-bind="foreach: products">
   <div data-bind="visible: $root.toShow()">
     <div data-bind="text: name"></div>
     <div data-bind="text: age"></div>
     <div data-bind="text: gender"></div>
   </div>
</div>

Javascript代码:

function testViewModel(){
   var self = this;
   self.a = ko.observable(0);
   self.b = ko.observable(0);
   var prod = [];
   for(var item in products){
     prod.push(new productItem(products[item]));
   }
   self.products = ko.observableArray(prod);
   self.changeValue = function(){
     self.a(self.a()+1);
     self.b(self.b()+1);
   }
   self.toShow = function(){
    if(self.a() % 2 === 0){
      return true;
    }
    else{
      return false;
    }
   }
 }

 function productItem(product){
   var self = this;
   self.name = ko.observable(product.name);
   self.age = ko.observable(product.age);
   self.gender = ko.observable(product.gender);
 }

 var products = [
 {
   name: 'A',
   age: 25,
   gender: 'Male'
 },
 {
   name: 'B',
   age: 27,
   gender: 'Female'
 },
 {
   name: 'C',
   age: 53,
   gender: 'Female'
 },
 {
   name: 'D',
   age: 54,
   gender: 'Male'
 }
]

ko.applyBindings(new testViewModel());

Answer 1

第一个问题，释义:

 <div data-bind="visible: $root.toShow()">...</div>

 self.a = ko.observable(0);
 self.b = ko.observable(0);
 self.toShow = function(){
  if(self.a() % 2 === 0){
    return true;
  }
  else{
    return false;
  }
 }

...when I change the value of observable a or b on button click, then how come the toShow method gets called?

每当您的 View 中有任何有效的数据绑定(bind)表达式时，Knockout都会在第一次评估时注册一个依赖树来跟踪哪个可观察(包括可观察数组等) ) 影响数据绑定(bind)表达式的值。它这样做是为了绑定(bind)到普通的可观察量，也适用于像您拥有的那样的函数。

这意味着 data-bind="visible: $root.toShow() 将使 Knockout 在第一次评估时看到它依赖于 a (但是不在b上!)，每当a发生变化时，它都会重新评估visible绑定(bind)。

第二个问题:

...when do I have to use () inside data-bind?

这已经是 asked before ，尽管恕我直言，目前答案还不是很完整。知道这两件事:

1. 可观察量是一个函数，不带参数调用它获取其当前值。
2. 如果 Knockout 将可观察名称视为数据绑定(bind)表达式中的唯一内容，它会“神奇地”添加这些括号。

因此，在数据绑定(bind)中执行 myObservable() 总是安全且可选的，并且您可以有时(例如，当 observable name 是表达式的唯一位)省略括号。

附注:

您的问题标题询问“它内部如何工作”，因此请注意 Knockout 是 open source你可以看看e.g. the expression rewriting你自己。