1

I've seen there's generally a bit of confusion when talking about multiple view models in knockout.js

The ko documentation doesn't really explain very much how to deal with multiple view models, how to communicate between them or when should they be considered.

I found this site explaining different ways of creating multiple view models and how to interact with them.

I gave it a try and I created a master model with different submodels:

var MasterModel = function(){
    this.orders = new ordersViewModel(),
    this.dates = new datesViewModel(),
    this.equipment = new equipmentViewModel();
};

After that, I found myself having to use with: nameOfModel in many places (and create extra wrappers or HTML comments for it) or even just using the view model's name as a prefix data-bind="foreach: orders.getList()".

Besides that, then we have the problem of communicating between them, and although it can be solved somehow, it doesn't seem as simple as when dealing with a single view model.

My question is, is it worthy to create multiple view models? If so, when? It seems it only adds more difficulties and I do not end up seeing the advantages of it. (yeah, they say its maintains modularity... but I don't end up seeing a clear advantage )

Alvaro
  • 40,778
  • 30
  • 164
  • 336

2 Answers2

2

There are no hard and fast rules to how many view models you should use or if you should use one catch all view model.

It all depends on the complexity of the application you are building and if you want to encapsulate and modularize bits of functionality for reuse or just sanity.

If you find yourself building a complex application then you may find modularizing your application into separate viewmodels easier to manage and change further down the line.

After that, I found myself having to use with: nameOfModel in many places (and create extra wrappers or HTML comments for it) or even just using the view model's name as a prefix data-bind="foreach: orders.getList()".

I use a framework called DurandalJS which promotes modularization and composition. It also provides some great features such routing and messaging. DurandalJS's composition can help you cut down on the amount with: bindings as it uses ko.applyBindings to bind view models and views to elements on the page.

Anish Patel
  • 4,332
  • 1
  • 30
  • 45
2

I agree with Anish Patel that it depends and it is about separation of concerns and keeping your classes in the Single Responsibility Principle (only do one thing with each class, which I've found difficult to do with view models). You may also need to think about making your view models testable with Jasmine or another JS test framework.

Using with: in the HTML is not a bad approach in my opinion.

RequireJs can help with making things modular and getting dependencies working.

ko.postbox allows you to do publish/subscribe communications between the view models without having to couple them together. This was in the link you mentioned. You can also communicate by having callback functions passed int your view models.

Durandal is a good suggestion. I'm also interested in Aurelia by Rob Eisenberg who is the creator of Durandal, but it is still in beta as of 7/2/2015. That will load modules with a standardized SystemJs and should make modularizing view models easier to do.

AlignedDev
  • 8,102
  • 9
  • 56
  • 91
  • I still don't have it clear why you say Aurelia or Durandal can help you to organize modules better. – Alvaro Sep 23 '15 at 09:25
  • @Alvaro I was thinking about Auerlia's dependency injection and loading system that is more integrated vs. having to bring in the different pieces (KO, RequireJs, etc). Both have advantages and writing good modular code is the developer's responsibility, but sometimes frameworks can make things easier. The Aurelia examples also seem to be good guidance, though I've only skimmed he surface of Aurelia so far. – AlignedDev Sep 23 '15 at 14:58