KnockoutJS–Templates

1 בדצמבר 2011

one comment

KnockoutJS–Templates

After being introduced KnockoutJsto KnockoutJS concept and go to know the
basics of data-binding with Observable and 
observableArray, let’s move on to how to work with templates and our collection to them.

In this post I’ll explain how to bind a collection with template.

Prerequisites

Now, adding to KnockoutJS Prerequisites (jQuery 1.4.2 and above)  you’ll need another Javascript library: jQuery.tmpl . You can download this version or visit the project page for latest version.

HTML as script

The templates are HTML content written inside of a script tag, and it looks like that:

 <script type="text/html" id="itemsTemplate">

<!-- Your HTML template content here -->

 </script>

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.

<ul data-bind='template: {name: "itemsTemplate", foreach: rssItems} '>

    </ul>

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.

In order to bind data where there is no suitable type for us (Assign a css class to an input element according to the item’s data) we can use the ($data) expression which points at the whole bounded item and have a JavaScript expression with it, as seen at the example below: (For our XAML friends – let’s say that this is a converter)

  <input type="text" data-bind="css:{selectedCustomerClass : ($data) == viewModel.selectedCustomer()}"/>

Summary:

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.

Heaving included the template JavaScript library of jQuery.tmpl, we can now write our own templates and bind it to our observableArray .

kick it on DotNetKicks.com

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

one comment

  1. wordsearch1 באוקטובר 2012 ב 17:50

    knockoutjs+MVC4+VS2012=perfect tools for me

    Reply