Difference between knockout View Models declared as object literals vs functions

by

There are a couple of advantages to using a function to define your view model.

The main advantage is that you have immediate access to a value of this that equals the instance being created. This means that you can do:

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

So, your computed observable can be bound to the appropriate value of this, even if called from a different scope.

With an object literal, you would have to do:

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

In that case, you could use viewModel directly in the computed observable, but it does get evaluated immediate (by default) so you could not define it within the object literal, as viewModel is not defined until after the object literal closed. Many people don’t like that the creation of your view model is not encapsulated into one call.

Another pattern that you can use to ensure that this is always appropriate is to set a variable in the function equal to the appropriate value of this and use it instead. This would be like:

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

Now, if you are in the scope of an individual item and call $root.removeItem, the value of this will actually be the data being bound at that level (which would be the item). By using self in this case, you can ensure that it is being removed from the overall view model.

Another option is using bind, which is supported by modern browsers and added by KO, if it is not supported. In that case, it would look like:

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         this.items.remove(item);
    }.bind(this);
};

There is much more that could be said on this topic and many patterns that you could explore (like module pattern and revealing module pattern), but basically using a function gives you more flexibility and control over how the object gets created and the ability to reference variables that are private to the instance.

More Related Contents:

  1. Resolve circular references from JSON object
  2. How to create an auto-complete combobox?
  3. Knockout.js incredibly slow under semi-large datasets
  4. Change observable but don’t notify subscribers in knockout.js
  5. knockout data-bind on dynamically generated elements
  6. Setting value of Observable not updating in Knockout
  7. How to clear/remove observable bindings in Knockout.js?
  8. make an input only-numeric type on knockout
  9. Knockout + Bootstrap 3 Radio Buttons
  10. When to use ko.utils.unwrapObservable?
  11. Binding true / false to radio buttons in Knockout JS
  12. combine dynamic and static classes through css binding, knockout.js
  13. Knockout JS – How to correctly bind an observableArray
  14. Javascript Equivalent to C# LINQ Select
  15. knockout.js using $index with if binding
  16. Knockout JS mapping plugin without initial data / empty form
  17. Adding The Anchor Text As The Title Dynamicaly
  18. How to automate shadow DOM elements using selenium?
  19. Can I programmatically open the devtools from a Google Chrome extension?
  20. Convert time interval given in seconds into more human readable form
  21. Jest: Timer and Promise don’t work well. (setTimeout and async function)
  22. How to change style of iframe content cross-domain?
  23. Is store.dispatch in Redux synchronous or asynchronous
  24. Object returning NaN when sum values
  25. How to disable Chrome’s saved password prompt setting through JavaScript
  26. Only on Firefox “Loading failed for the with source”
  27. destructuring falsy and null with default parameters
  28. opening Outlook through javascript
  29. Clone a file input element in Javascript
  30. Setting the height of a DIV dynamically

Leave a Comment