View-Model declaring of Knockout.js. There are two methods

Question

I am using Knockout.js for a rich client application and it will consist of large number of knockout.js ViewModels. In the development, I noticed two ways of creating knockout.js ViewModels. First way.

function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");}

Second way.

var appViewModel = {
this.firstName = ko.observable("Bert"),
this.lastName = ko.observable("Bertington")};

Is there any specific difference in these two methods of declaring ViewModels? In knockout.js official page examples they have used the first way. But in third party frameworks like Knockout-validations.js has used second way. Which way should I use? Any specific advantage in using it?

I found out if I use first way, then I cant use Knockout-validations.js framework. I am really confused on this matter. Any comment is appreciated.

Thank you.

Here is another link that might help: http://stackoverflow.com/questions/9589419/difference-between-knockout-view-models-declared-as-object-literals-vs-functions — RP Niemeyer, Sep 28 '12 at 12:15

score 3 · Accepted Answer · answered Sep 28 '12 at 06:07

The first way defines an object constructor but does not instantiate a new object, you can pass in arguments this way. If you're creating multiple objects/models this would definitely be less clunky than the second way.

The second way is using object initializer syntax, this instantiates a new object in memory with whatever fields you set it to. In general this produces for smaller code size; if you're creating two objects of the same or similar structures, use the first way.

There is no reason why you can't use the first in place of the second. Simply creating a new object and pass it in wherever it is needed.

This:

function AppViewModel(fName, lName) {
    var self = this;
    self.firstName = ko.observable(fName);
    self.lastName = ko.observable(lName);
}
...
var appViewModel = new AppViewModel("Bert", "Bertington");

creates the same object as this:

var appViewModel = {
    this.firstName = ko.observable("Bert"),
    this.lastName = ko.observable("Bertington")
};

The first one just allows for more AppViewModels to be created, e.g. new AppViewModel("Joe", "Shmoe")

score 2 · Answer 2 · answered Nov 13 '12 at 03:29

The difference you describe is not specific to knockout or knockout's libraries, rather it is a language-level issue widely debated among the JavaScript community. Douglas Crockford, a JavaScript guru, has two articles on both sides of the matter:

From scattered forum posts, blog articles, and conversations with JavaScript programmers, it appears that the community is trending towards embracing the prototypal style. You should use whichever style you prefer. Based on the documentation, it looks like the Knockout-Validation library was designed with the classical style in mind. The advantage of the classical style in this case would simply be that it is easier to use with the Knockout-Validation library. The disadvantage of the prototypal way is that it is harder to use with this library.

View-Model declaring of Knockout.js. There are two methods

2 Answers2