Knockout.js Project Structure

问题:

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.

回答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.

回答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.

回答3:

You can achieve what you want with sub templates, which can be treated as view partials.

For example:

<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 than you'll have to load the main template, like:

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

回答4:

I didnt like the explicit template binding in KO, it was to much strings everywhere. So I created a Convention over configuration library

Can be installed using nuget

Install-Package Knockout.BindingConventions

Lets say you have a member this.selectedCustomer on your model and that its content is of type CustomerViewModel. With my library this piece of html code

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

would bind the div to a template named "CustomerView" http://jsfiddle.net/xJL7u/5/

It has a bunch of other conventions too for buttons, etc https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

I also created a external template engine that uses above framework together they are really powerfull

Install-Package Knockout.Bootstrap

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