javascript - ko 可观察对象或函数

Question

我试图了解保持可观察函数或将其设置为对象之间的区别

我的可观察项目:

self.SelectedItem = ko.observable();

我的观点:

  <div class="collapse" data-bind="with: SelectedItem">
    @Html.Action("Profile", "Team")
  </div>
  <div class="collapse" data-bind="with: ItemForEditing">
    @Html.Action("EditProfile", "Team")
  </div>

从网格中选择项目:

ko.utils.extend(TeamManager.prototype, {
  selectItem: function (item) {   
    if (typeof item == "undefined") return;  
    this.SelectedItem(item);  
    //this.SelectedItem = item;  
    ko.mapping.fromJS(ko.mapping.toJS(item), this.ItemForEditing);   
  },

  acceptItem: function (itemData) {
    ko.mapping.fromJS(itemData, {}, this.SelectedItem);
  },

为什么我对 View 的绑定(bind)只有在可观察的情况下才有效 SelectedItem作为函数调用，例如 this.SelectedItem(item); ，而不是作为分配，例如 this.SelectedItem = item; .后者导致局部 View 不渲染。

如果我这样使用 this.SelectedItem(item);没关系 - 为什么我需要这样使用它？

Answer 1

那只是how observables work . knockout observable 将您的属性/变量变成一个函数。要从中获取值，您必须调用不带参数的函数。要设置该值，请使用新值调用它。使用新值调用函数的行为允许 knockout 更新任何订阅，包括您的绑定(bind)。

当你这样做时:

this.SelectedItem = item; 

SelectedItem不再是 observable ，已更新为直接指向 item ，因此不会更新任何绑定(bind)。

话虽如此，如果您在现代环境中工作， knockout 的主要作者之一已经制作了 a plugin这允许更通常的属性访问，其中分配将起作用。