Question

我正在尝试为observableArray实现一个简单的'toString'函数。

使用这个似乎最适合我的代码时

var viewModel = {

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

  third: ko.computed(function(){

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

ko.applyBindings(viewModel);

我得到一个.arr不是函数错误

为什么会这样？

如果我像这样运行一切都没问题。

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时没有视图模型可以传入。因此，请将您的视图模型创建为构造函数：

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

knockout可观察数组计算

1 个答案: