In this blog, I will create a sample which combines the data binding and mvvm characteristics of Knockout with some of the basic templating features of JSRender.
First, lets take a look at the code.
The sample has two buttons - Show Players and Hide which shows and hides some player information.
In the HTML, the buttons are data bound to their respective handlers using knockout. I am also using bootstrap.css to style the buttons. bootstrap.css is a collection of usually used styles and can be downloaded from http://twitter.github.com/bootstrap/. There is a div which will hold the output HTML when the Show Players button is clicked. Then we define the JSRender template. The template consists of an unordered list. {{for players}} means that the JSRender engine will loop through each item in the players collection. And for each item it will show a list item. The list item itself consists of a div with more templating. #index is a keyword for JSRender which gives the 0-based index value of the item. {{:name}} means that access the name property of that item. {{:address.city}} means that we can use the dot-notation to traverse through the object hierarchy. {{html:description}} means that we can access the encoded value of the description property in that item. The {{if}} and {{else}} construct help in decision making. In this example, we are saying that if likes are defined show the interests otherwise show no interests defined. {{:#data}} is another keyword for JSRender which allows us to access the item. This is important because unlike the top for loop where we knew that every item is a player with properties like name, game etc the likes collection is just a string array. So we can access these individual strings by using #data.
The Javascript code is simple revealing module pattern for the view model. It has public handlers for the show players click event and clear players click event and some other observables. In get players we take the id of the template defined in the HTML and call the render function on it with the data that we want to supply.
First, lets take a look at the code.
The sample has two buttons - Show Players and Hide which shows and hides some player information.
In the HTML, the buttons are data bound to their respective handlers using knockout. I am also using bootstrap.css to style the buttons. bootstrap.css is a collection of usually used styles and can be downloaded from http://twitter.github.com/bootstrap/. There is a div which will hold the output HTML when the Show Players button is clicked. Then we define the JSRender template. The template consists of an unordered list. {{for players}} means that the JSRender engine will loop through each item in the players collection. And for each item it will show a list item. The list item itself consists of a div with more templating. #index is a keyword for JSRender which gives the 0-based index value of the item. {{:name}} means that access the name property of that item. {{:address.city}} means that we can use the dot-notation to traverse through the object hierarchy. {{html:description}} means that we can access the encoded value of the description property in that item. The {{if}} and {{else}} construct help in decision making. In this example, we are saying that if likes are defined show the interests otherwise show no interests defined. {{:#data}} is another keyword for JSRender which allows us to access the item. This is important because unlike the top for loop where we knew that every item is a player with properties like name, game etc the likes collection is just a string array. So we can access these individual strings by using #data.
The Javascript code is simple revealing module pattern for the view model. It has public handlers for the show players click event and clear players click event and some other observables. In get players we take the id of the template defined in the HTML and call the render function on it with the data that we want to supply.