Knockout.js Project Structure

Question

I have been looking at Angular.js and Knockout.js as potential front end solutions. I love Knockout's tutorials and documentation. However, it is not clear to me how Knockout handles templating larger applications.

For example in Angular, you would make a main template like this:

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

And then this would be populated by by the "partials", for example:

<p>This is a partial</p>

My question is, does Knockout support the same concept? It appears that Knockout wants to use the "foreach" template (http://knockoutjs.com/documentation/template-binding.html). However, that does not address breaking the HTML down into smaller segments.

Am I on the right track here? Is there something I am missing in regards to Knockout's directory structure?

EDIT: I have gotten some good feedback. My understanding is that Knockout does not have a templating solution built in. If this is true, then I will probably need Angular.

Answer 1

Knockout is not direct competition to the Angular framework, it is more like small library for data binding in MVVM style than full framework for building single page apps.

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

Answer 2

See Ryan Niemeyer's knockout AMD helpers project on github

From the Readme:

This plugin is designed to be a lightweight and flexible solution to working with AMD modules in Knockout.js. It provides two key features:

1- Augments the default template engine to allow it to load external templates using the AMD loader's text plugin. This lets you create your templates in individual HTML files and pull them in as needed by name (ideally in production the templates are included in your optimized file).

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