One of the most interesting aspect of working with knockout is that it provides us with the easy way of working with templates. In this post we will see how we can design a very cool template and use it to have some rather cooler result.
The setup for the project would be the same as discussed in the post Getting Started with Knockout.JS. Now let’s discuss briefly what exactly that, which we are going to do.
What are we up to?
We would be creating a HTML page where we will have few entries of persons by default (which we will be doing from code), and user have the privilege that he can add his own entries. The entries will have the name of the person and his/her age. Here it is how it will look like.
I haven’t added any CSS to this, as to keep things simple if not beautiful. As you can see, the list of names is populated right when the page loaded. Also the user can add a person with the help of text boxes and button below. Now, let’s jump right into coding stuffs.
Designing View
Designing view is the first step. As it is what the user will see and interact with. However there are various ways our view can be designed. For this post, we will be designing it using templates. If it is new to you, then believe me, it is very cool.
From the first post, you can see our View’s boiler plate code, which is:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html lang="en">
4: <head> 5: </head> 6: <body> 7: 8: <script src="js/knockout 3.0.0.0.js"
9: type="application/javascript"></script>
10: <script src="js/ViewModel.js"
11: type="application/javascript"></script>
12: 13: </body> 14: </html>Now let’s create text boxes and button:
1: <p>Name: <input type="text" data-bind="value: EnteredName" /></p>
2: <p>Age: <input type="text" data-bind="value: EnteredAge" /></p>
3: <button data-bind="click: addPerson" style="width:80px;">Add</button>
While text boxes are data-bind with the properties EnteredName, EnteredAge from the view model, Button is data-bind with a listener addPerson, which is also in the ViewModel. Now let’s add the template.
1: <script type="text/html" id="person-template">
2: <table border="0" data-bind="foreach: Persons" >
3: <tr> 4: <td data-bind="text: Name"></td>
5: <td data-bind="text: Age"></td>
6: </tr> 7: </table> 8: </script> Template is the sketch of what a particular thing actually possess. In our case for example, we have a table, which will iterate on every item present inside the array Persons (which is data-bind with our template), and create a corresponding row entry for each item. In order to add template to our View to make it visible, it is needed to be bind with a placeholder tag. Whether it being a division, a section or anything. So our entire View would be like:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html lang="en">
4: <head> 5: </head> 6: <body> 7: 8: <div id="content"
9: data-bind="template: { name: 'person-template'}"></div>
10: 11: <p>Name: <input type="text"
12: data-bind="value: EnteredName" /></p>
13: <p>Age: <input type="text"
14: data-bind="value: EnteredAge" /></p>
15: <button data-bind="click: addPerson" style="width:80px;">Add</button>
16: 17: <script type="text/html" id="person-template">
18: <table border="0" data-bind="foreach: Persons" >
19: <tr> 20: <td data-bind="text: Name"></td>
21: <td data-bind="text: Age"></td>
22: </tr> 23: </table> 24: </script> 25: 26: <script src="js/knockout 3.0.0.0.js"
27: type="application/javascript"></script>
28: <script src="js/ViewModel.js"
29: type="application/javascript"></script>
30: 31: </body> 32: </html>Coding ViewModel
Once our View is ready, our next task is to code for ViewModel. As previously discussed, boiler plate code for ViewModel is:
1: var ViewModel = function() {
2: //Code here
3: } 4: ko.applyBindings(new ViewModel());
We need to write our custom logic here inside the view model. As discussed, we need to first work on two things, creating properties EnteredName, EnteredAge and event listener addPerson, so our code would be like:
1: var ViewModel = function() {
2: 3: this.EnteredName = ko.observable();
4: this.EnteredAge = ko.observable();
5: 6: this.addPerson = function(){
7: 8: } 9: } 10: 11: ko.applyBindings(new ViewModel());
Next thing to do is to create a prototype Person. To understand prototyping, have a look at the following post. So our prototype will look like:
1: var Person = function(name,age){
2: this.Name = ko.observable(name);
3: this.Age = ko.observable(age);
4: }We need to create knockout’s observable array Persons so as to bind our Template with, and insert some default values inside.
1: var ViewModel = function() {
2: 3: this.Persons = ko.observableArray();
4: 5: this.EnteredName = ko.observable();
6: this.EnteredAge = ko.observable();
7: 8: this.Persons.push(new Person("Prachi","20"));
9: this.Persons.push(new Person("Pooja","22"));
10: this.Persons.push(new Person("Sneha","19"));
11: this.Persons.push(new Person("Ritika","18"));
12: this.Persons.push(new Person("Raakhi","22"));
13: 14: this.addPerson = function(){
15: if(this.EnteredName() != ""){
16: this.Persons.push(new Person(this.EnteredName(),this.EnteredAge()));
17: } 18: } 19: } 20: 21: var Person = function(name,age){
22: this.Name = ko.observable(name);
23: this.Age = ko.observable(age);
24: } 25: ko.applyBindings(new ViewModel());
To insert the values inside an observableArray, push method is used. In our event listener addPerson, we are pushing the new object of Person, created from the values of EnteredName and EnteredAge property which are bind with the input boxes on the View.
If you run the code now, you will see the exact screen as snapped attached above. And not only you can see default entries, you can add yours too.
Happy Coding.
Posts
0 comments