Javascript MVC Learning Notes (iii) views and templates

Template

The core concept of templates in JavaScript is the merging of HTML fragments and JavaScript objects that include template variables. Replace the template variable with the property value in the object.

The book mentions several libraries as template engines, but the links fail. Can download here, Link: jquery.tmpl

The way to use it is very easy, just look at its instructions. Given a template. By adding data to it, you can generate a well-rendered element node. You can then add it to the page, using the main usage as:

//data   var  object = {URL:  "http://example.com" , GetName: function   ()  { return  " Trevor "; }}; //template  var  template =  ' <li><a href= ' ${url} ' >${ GetName ()}</a></li> ' ; //generate the rendered element  var  element = $.tmpl (template, object); //added to Body  $ (). Append (Element);  

You can see the ${} variables that are used to write the inserts, and then get the detailed values based on the $.tmpl() object corresponding property names that are passed in. The above instance will generate one <li><a href="http://example.com">Trevor</a></li> and insert it at the end of the body.

There are many more template features. For example, conditions and iterations, students who have used El expressions should be well understood. Detailed usage can go Baidu Google a bit.

For the storage of the template. Can be saved in the <script> tag, the ID of the tag gets the reference of the template.

Example:

<!--store templates --<script type="Text/x-jquery-tmpl" id="Sometemplate"> <span>${getname ()}</span> </script><script> var data = {getName:  function(){return "Bob";    }} var element = $ ("#someTemplate"). Tmpl (data);   Element.appendto ("Body");                </script>

Binding

Essentially speaking. Bindings hang the view element and the JavaScript object (which is typically the model) along the street. When the model changes, the view is updated at the right time based on the changed object.

Binding means that the controller does not have to deal with the update of the view when the record changes, because the update has already been actively completed. Using bindings also lays the groundwork for building real-time applications.

For example, there is a ul list that shows the users in the app. We need to create a user when the ul change is also dynamic.

<ul id="users"></ul>

A user corresponding li to an element, so create a template to save username:

<script type="text/x-jquery-tmpl" id="userTmpl">    <li>${name}</li></script>

Then bind the model and the view:

//ModelvarUser = function(name){     This. name = name;};//array for storing usersUser.records = [];//define events for user bindings themselvesUser.bind = function(EV, callback){    //Initialize _callbacks (The object property is the event name and the value is the corresponding event handler)     This. _callbacks | | ( This. _callbacks = {});//Initialize _callbacks[ev] (an array that contains the event handler function for the event)( This. _callbacks[ev] | | ( This. _callbacks[ev] = []). push (callback);}//Trigger yourself to define eventsUser.trigger = function(EV){    varListif(! This. _callbacks) {return; }//Get all event handler functions    if(! (List = This. _callbacks[ev])) {return; }//Run all$.each (list, function(){         This(); })}//Create userUser.create = function(name){    //Store users     This. Records.push (New  This(name));//Trigger yourself to define events     This. Trigger ("Change");}; $( function(){    //Bind eventUser.bind ("Change", function(){        //Create a template, passing in an array that represents the render template for all objects within the array. How many templates are created by the number of objects        varTemplate = $ ("#userTmpl"). Tmpl (User.records);//Once again to render UL$("#users"). Empty (). append (template); });});

You can see that the event is triggered in the User.create method, change and the bind function through the binding to get User.records another render ul , so every time you join the user will let the ul refresh.

Call the Create method:

User.create("zhangsan");User.create("lisi");

The effect immediately came out:

Javascript MVC Learning Notes (iii) views and templates