How to properly structure your KnockoutJS application

Question

I am wondering how to properly create a KnockoutJS application.

• In the official documentation, only one ViewModel is almost always used!

After several implemented functions, my code became very confusing and based on an object-oriented background, I am very allergic to architecture. Therefore, there must be a better solution.

Being not very experienced with JavaScript, I searched for Stackoverflow and found these three options . So I tried the first two options, and I'm not happy with them:

• Having multiple ViewModels , for example here .

It is very difficult for me to decide which DOM element gets what ViewModel. Several functions were also called from outside the DOM element. Perhaps I used too few ViewModels with this architecture, but the communication between ViewModels seemed different to me and somehow should not be necessary. I hope so. So how to do it right?

• Having subsets and using with binding (the second option is these three ).

This was my preferred type of architecture, because you can have bindings for the entire document from the same presentation model, but you can also structure your code into sub-chunks and snap them where you want using a snap-binding. This option, though, requires object literals instead of functions that are worse than described in this one.

I have not tried method three because it seems a little redundant and also uses object literals.

So, is there a way to structure my code, as well as complete control without using object literals?

I hope this was not too confusing: -P

Answer 1

For any of the options you specify, you do not need to use object literals. Samples just used them to simplify the code. You can create individual viewing models in any way convenient for you.

For example, in # 3 you can use the constructor function, for example: http://jsfiddle.net/rniemeyer/PctJz/149/ . Of course, the actual data will be passed to the function, and not be static. Same thing with # 2, you just would have to wrap it in a View object.