Knockout.js project structure

Question

I considered Angular.js and Knockout.js as potential solutions for end users. I love knockout tutorials and documentation. However, I don’t understand how Knockout handles large application templates.

For example, in Angular, you should make the main template as follows:

<div id="content" class="container" ng-view></div> 

And then it will be filled with "partial", for example:

 <p>This is a partial</p> 

My question is, does knockout support the same concept? It seems like Knockout wants to use the foreach pattern ( http://knockoutjs.com/documentation/template-binding.html ). However, this does not apply to breaking HTML into smaller segments.

Am I on the right track here? Is there something I am missing regarding the Knockout directory structure?

EDIT: I got a good feedback. I understand that Knockout does not have a built-in template solution. If true, I will probably need Angular.

Answer 1

Knockout is not a direct competition with the Angular framework; it looks more like a small MVVM-style data binding library than a complete framework for creating single-page applications.

Please take a look at Durandal ( http://durandaljs.com/ ), which is based on knockout and provides composition based on the recommended project structure and many other parts for the successful implementation of single-page applications (router, dialogs, tools, build process, amd support and etc.) similar to Angular or Ember.

Answer 2

See the Ryan Niemeyer knockout AMD helpers project on github

From the Readme:

This plugin is designed as an easy and flexible solution for working with AMD modules in Knockout.js. It provides two main functions:

1- Sets the default template engine so that it can load external templates using the AMD boot loader text plugin. This allows you to create your templates in separate HTML files and drag them as you need a name (ideally, an optimized file is included in the templates).

2- Creates a module binding that provides a flexible way to load data from an AMD module and either bind it to a template or to an anonymous / embedded template.

Answer 3

You can achieve what you want with the help of auxiliary templates, which can be considered as partial representations.

For instance:

 <script type="text/html" id="main-template"> some content... <!--ko template: {name: 'sub-template-1'} --><!-- /ko --> some more content... <!--ko template: {name: 'sub-template-2'} --><!-- /ko --> </script> 

And how do you have to download the main template, for example:

 <!-- ko template: { name: 'main-template' } --><!-- /ko --> 

Answer 4

I did not like explicit template binding in KO, it was a lot of lines all over the world. Therefore, I created a configuration context library

Can be installed using nuget

 Install-Package Knockout.BindingConventions 

Suppose you have a member of this.selectedCustomer on your model and that its contents are of type CustomerViewModel . With my library this html code snippet

 <div data-name="selectedCustomer"></div> 

will bind a div to a template called CustomerView, http://jsfiddle.net/xJL7u/5/

He has a few more conventions for buttons, etc. https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

I also created an external template engine that uses the above frames together, they are really powerful

 Install-Package Knockout.Bootstrap 

https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki