knockout observable array computed

Question

I am trying to implement a simple 'toString' function for an observableArray.

When using this code which seems the most appropriate to me

var viewModel = {

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

  third: ko.computed(function(){

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

ko.applyBindings(viewModel);

I get a this.arr is not a function error

Why is this happening?

If I run it like this everything is ok.

var viewModel = {

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

  third: function(){

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

ko.applyBindings(viewModel);

If I use the second approach, will I get the correct arr contents? Does the third variable get updated every time an item is added/removed from arr?

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

See jsfiddle.net/zek2kz2b/5

Grigoris
– Grigoris

2015-09-23 13:41:09 +00:00
Commented Sep 23, 2015 at 13:41 — Grigoris
– Grigoris, Commented Sep 23, 2015 at 13:41

JohnnyHK · Accepted Answer · 2015-09-23 14:15:09Z

What's happening is that this in your computed isn't the view model so it doesn't have an arr method.

You need to provide your computed with the this context to use when it's invoked. You can do this by passing the view model a second parameter in your ko.computed call.

But because you're creating your view model as a plain object, you don't have the view model to pass in at the time you're calling ko.computed. So create your view model as a constructor function instead:

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

Another way to do this is to simply reference the self reference to the view model in the computed:

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

Collectives™ on Stack Overflow

knockout observable array computed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related