Front-End rendering tool--jsrender Getting Started

Jsrender many front-end personnel should have used, it is a more powerful template, not involving too much technology dependence, use very comfortable. I myself used react before using it in front-end development (actually I feel react not jsviewes usable). Anyway, the first to learn the Jsrender technology, if the front-end development environment is relatively simple, or very suitable.

First, jsrender characteristics

a new generation of front-end rendering templates

• Using a template, you can pre-customize some fixed-format HTML tags, when you need to display data, and then into the real data assembly and display in the Web page, which avoids the JS in the "+" and other manual segmentation, connection string complex process.

• Optimized for high performance and pure string rendering

• No reliance on DOM and jquery

Priority Usage Scenarios

• The element repeats itself
• Load data dynamically and display it on the front

Second, the use of Jsrender

1. Introduction of Js:jsrender.js
2. To define a template:
3. Prepare the data JSON object to be displayed var data = {xxx: "text"}
4. Compile into elements: document.getElementById ("XXX"). Render (data); or $ ("#XXX"). Render (data);
5. Append, before, after display of container elements

Basic Syntax

• Original assignment: {{: property name}}, showing raw data
• Transcoding Assignment: {{> property name}}, displaying HTML-encoded data
• Control statements can be nested using:
  • Judgment: {{if expression}} ... {{Else}} ... {{/if}}
  • Loop: {{for array}} ... {{/for}}
• Other advanced
  • Template nesting, using: {{for tmpl= "#另一个模板"/}}
  • Converter $.views.converters () definition, using: {{func: property name}}
  • Help method $.views.helpers () definition, using: {{if ~func (arg1, arg2, ...)}}
  • Custom Label $.views.tags ()

A few points you may not know

• Gets the current index: #index, such as {{if #index ==0}} ... {{/if}}

• Get the entire data: #data, such as <option value= "{{: #index}}" >{{: #data}}</option>

• Get parent Template: #parent, such as {{if (#parent. data.general==0)}} ... {{/if}}

Three, give an example

is a Web page I used to do:

The source of its data is probably this:

1234567891011121314

[      {          id:12,          cid:195,          type:"问题简述",          impact:"错误级别",          status:"处理状态",          owner:"处理人",          count:1,          path:"问题所在文件的SVN路径",          rev:对应文件的SVN版本号,          …      } , ...]

Our focus is on how this template is written:

We can see the red part of the bid, in addition to helper and tag, most of the functions are used. I really do not want to do a good demo to everyone download, itself is not complex, do not understand can communicate again.

Four, performance comparison

Reprint Please specify original site: http://www.cnblogs.com/lekko/p/5888962.html

Front-End rendering tool--jsrender Getting Started