In this post I’ll explain how to bind a collection with template.
HTML as script
The templates are HTML content written inside of a script tag, and it looks like that:
The script tag has an ID, it will be used to associate the template to a place in a document where it should be presented
Associate the template
The following HTML element (Unordered list in here) will be associated to the template, as below. the template binding has tow main attributes: name to associate with the template (corresponds to the ID attribute of the template above) and the foreach which corresponds to the observableArray member of the view-model we’d like to bind.
Now, the HTML element is associated with a template and bounded to a data member.
Let’s have a look inside the template:
Binding inside the template
Binding inside the template is very similar to regular binding, only that we bind to and item within a collection instead of binding to a data member inside our view-model.
After heaving simple binding we’d like to bind a collection and as we did in every other technology (ASP.Net, WPF, WinForm you name it…) we need a template to bind it to.