javascript - knockout 可观察数组计算

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 不是 View 模型，因此它没有 arr 方法。

您需要为您的计算提供 this 上下文，以便在它被调用时使用。您可以通过在 ko.computed 调用中向 View 模型传递第二个参数来完成此操作。

但是因为您将 View 模型创建为普通对象，所以在调用 ko.computed 时您没有要传递的 View 模型。因此，改为将 View 模型创建为构造函数:

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 引用引用到计算中的 View 模型:

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());