計算出的可觀察數組

Question

我正在嘗試為observableArray實現一個簡單的“toString”函數。

當使用這個對我來說最合適的代碼時

var viewModel = {

  name: ko.observable('test'),
  arr: ko.observableArray(['item1']),

  third: ko.computed(function(){

    return this.arr().join();
  })
};

ko.applyBindings(viewModel);

我得到一個 this.arr is not a function錯誤

為什么會這樣？

如果我這樣運行它一切正常。

var viewModel = {

  name: ko.observable('test'),
  arr: ko.observableArray(['item1']),

  third: function(){

    return this.arr().join();
  }
};

ko.applyBindings(viewModel);

如果我使用第二種方法，我會得到正確的 arr 內容嗎？ 每次從 arr 添加/刪除項目時，第三個變量是否都會更新？

https://jsfiddle.net/zek2kz2b/5/

Answer 1

發生的事情是您的計算中的this不是視圖模型，因此它沒有arr方法。

您需要為您的計算提供this上下文以在調用時使用。 您可以通過在ko.computed調用中向視圖模型傳遞第二個參數來實現此ko.computed 。

但是因為您將視圖模型創建為一個普通對象，所以您在調用ko.computed時沒有要傳入的視圖模型。 因此，將您的視圖模型創建為構造函數：

function ViewModel() {
  var self = this; // Capture the view model as self to simplify things
  self.name = ko.observable('test'),
  self.arr = ko.observableArray(['item1']),
  self.third = ko.computed(function(){
    return this.arr().join();
  }, self); // We now have the view model available to pass here
};
ko.applyBindings(new ViewModel());

另一種方法是簡單地將self引用引用到計算中的視圖模型：

function ViewModel() {
  var self = this;
  self.name = ko.observable('test'),
  self.arr = ko.observableArray(['item1']),
  self.third = ko.computed(function(){
    return self.arr().join();
  });
};
ko.applyBindings(new ViewModel());