Use of the "JS" Jsrender template plugin

New company project, colleagues recommended my Jsrender template plug-in, with the feeling is very useful, at least more convenient than stitching strings, and support binding and function judgment, as well as some other advanced usage, I used to have, data binding, if else judgment, and method binding, and so on. Don't say much nonsense and start introducing. (Not Jsrender study, only individual project summary)

Look at the code first:

<script type= "Text/x-jsrender"  id= "Lettersenduserinfotemplate" >        <div class=" Info_warp ">         <div class= "Info_inner" >             <span class= "username" >{{:name}}</span>             <span class= "UserInfo" >{{:title1string}}</span >            <span class= "UserInfo" > {{:title2string}}</span>        </div>         <p class= "Micro_text" >             {{:micromotto}}        </p>    </ Div></script>

Yes, the above is the template, {{}} is the model data to be bound. Home, page reference jsrender.js not much to say, if binding the above template, the method is as follows:

var tabhtml = $ ("#letterSendUserInfoTemplate"). Render (data);  Letter.options.leftlettertabcontainer.html (tabhtml); var data=[{headphotos: ', Name: ', title1string: ', title2string: ', Micromotto: '}, {headphotos: ', Name: ', Title1string: ', title2string: ', Micromotto: '}];

In fact, it is very simple, if it is an AJAX request, as long as the returned data items are bound to the corresponding HTML, and then use the template render method to get the corresponding HTML, assigned to the corresponding Div or other elements, OK, save the trouble of spelling HTML and difficult to maintain.

Use function one: For loop

{{for #data}}html code {{/for}}

Use function two: if else to determine the value of a different class for the element according to different conditions

Class= "{{if placement==0}}other {{else}}self{{/if}}} {{if isread}}{{else}}notread{{/if}} clearfix"

Use function Three: Use JS method, convert time to fixed format, notice Shorttimeformatter method must be put in $.views.helpers inside

$.views.helpers ({    timeformatter: function  (time)  {         var t = time.split (' t ');         var result = t[0].substr (0, 10)  +  '   '  + t[1].substr (0 ,  5);        return result;    },     ShortTimeFormatter: function  (Time)  {         var t = time.split (' t ');        var  Result = t[0].substr (2, 8)  +  '   '  + t[1].substr (0, 5);         return result;    },     lasttimeformatter: function  (Time)  {        return  $.getdatediff (time);     }}); 

<div class= "Release_time" > {{>~shorttimeformatter (addtime)}} </div>

Well, there are a few simple ways to use the project, but JsRender should be more powerful, but I'm not using it, I'm interested in surfing the Internet, yes, JsRender

This article is from the "PZ Technical training base" blog, please be sure to keep this source http://panzi.blog.51cto.com/4738203/1603983

Use of the "JS" Jsrender template plugin