Javascript MVC Learning Notes (iii) views and templates

Template

The core concept of templates in JavaScript is to merge HTML fragments and JavaScript objects that contain template variables, replacing template variables with attribute values in objects.

The book describes several libraries as template engine, but the link is invalid, can be downloaded here, Link: jquery.tmpl

The way to use it is simple, just take a look at its instructions. Given a template, by adding data to it can generate a well-rendered element node, and then you can add it to the page, the main use of methods such 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 specific 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.

Template function There are many, such as conditions and iterations, the use of the El expression of the students should be well understood, the specific use can go Baidu Google a bit.

For the storage of the template, you can save it in the <script> tag, and get a reference to the template by its ID. Like what:

<!--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, bindings hang the view element and the JavaScript object (usually the model) in the street. When the model changes, the view is updated as appropriate, based on the changed object.

Binding means that the controller does not have to handle the update of the view when the record is changed, because the update is done automatically, and the use of bindings 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 and let ul it change dynamically.

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

A user corresponds li to an element, so create a template to save the user name:

<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 = [];//Bind custom events for usersUser.bind = function(EV, callback){    //Initialize _callbacks (The object property is the event name, and the value is the corresponding event handler function)     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);}//Touch Custom EventsUser.trigger = function(EV){    varListif(! This. _callbacks) {return; }//Get all event handler functions    if(! (List = This. _callbacks[ev])) {return; }//Execute all$.each (list, function(){         This(); })}//Create userUser.create = function(name){    //Store users     This. Records.push (New  This(name));//Touch Custom Events     This. Trigger ("Change");}; $( function(){    //Bind eventUser.bind ("Change", function(){        //Create a template, passing in an array representing how many templates are created for each object in the array.        varTemplate = $ ("#userTmpl"). Tmpl (User.records);//re-render UL$("#users"). Empty (). append (template); });});

You can see that the event is triggered in the method, and the function that is bound by it User.create change bind gets User.records re ul -rendered, so each time you add a user it will be ul refreshed.

Call the Create method:

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

The effect immediately came out:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Javascript MVC Learning Notes (iii) views and templates