Knockoutjs Learning Notes 02:jsrender template engine

The last article mentions the template and tries to write the simplest version of it yourself; some friends may have used Jqtmpl, a jquery-based template engine, but it is no longer updated, and it is said to render slower. Another template engine is introduced here:JsRender. Personally think these things learning is still very simple, pick a look on the line, the actual use of which, the official website to see the demo will be used. The Jsrender is chosen because it has the following characteristics:

• Simple and intuitive
• Powerful features
• The extensible
• Fast as lightning.

Of course, who will give their own products under this definition. But after I used it, I did find it: simple, intuitive, powerful, scalable, as fast as lightning ..., interested friends can test to see how fast! Next, let's learn the use of Jsrender, which is used in version 1.0.

First, the basic

JsRender three most important concepts: templates, containers, and data. Most importantly: View is the template we define, and the context is the object used by the view.

First look at the basic label of the template: {{:}} and {{;}} (or {{html:}}). Both can output content, but the latter is HTML-encoded. Jsrender There are several ways to render data:

Suppose the template is as follows:

<script type= "text/tmp" id= "TMP1" >    <p>my name is: {{:name}}</p>    <p>i am: {{: Info.age} } Years old</p></script>

The data are as follows:

    var data = {        name: "Tom",        info: {age:19}    }

1. No pre-compilation rendering. Specify the template directly. Example:

var html = $ ("#tmp1"). Render (data);
Console.log (HTML);

2. Post-compilation rendering. Specifies a template or string.

2.1 Specify the template. The effect is the same as 1. Example:

var template = $.templates ("#tmp1");
var html = template.render (data);
Console.log (HTML);

2.2 Specifying the template name

2.2.1 Passing strings

var template = $.templates ("Tmp1", "<b>{{:name}}</b>");
var html = $.RENDER.TMP1 (data);
Console.log (HTML);

2.2.2 Passing multiple template names

var template = $.templates ({
"TMP1": $ ("#tmp1"). HTML (),
"TMP2": $ ("#tmp2"). HTML ()
});
var html = $.RENDER.TMP1 (data);
Console.log (HTML);

Ii. Logical judgment and circulation

2.1 If-else

　　Syntax: {{if condition}} ... {Else Condition} ... {{Else}} ... {{/if}}

Note that this is if-else-else, not if-else if-else. Example:

<script type= "text/tmp" id= "Tmp4" >    <p>my name is: {{:name}}</p>    <p> I am:    {{if Info.age >=}}        adult    {{else}}        minor    {{/if}}    </p></script>var HTML = $ ("#tmp4"). Render (data); $ ("#list"). HTML (HTML);

2.2 For

Syntax:{{for}} ... {{/for}}

2.2.1 Simple for. Example:

    <script type= "text/tmp" id= "TMP5" >        {{for}}            <li>id:{{:id}} name:{{:name}}</li>        {{ /for}}        </script>    var arr = [        {id:1, Name: "Tom"},        {id:2, Name: "Jack"},        {id:3, name : "Lucy"}    ];        var html = $ ("#tmp5"). Render (arr);    $ ("#list"). HTML (HTML);    

2.2.2 Nested for.

　　Syntax: {{for}} ... {{For current context}} ... {{/for}} ... {{/for}}

The nested for can specify the name of the property to traverse. #getIndex () and #data are mentioned below. Example:

<script type= "text/tmp" id= "TMP7" >        {{for}}        <li>            name:{{:name}}            <ul>                {{for Hobbies}}                    <li>{{: #getIndex () + 1}}:{{: #data}}</li>                {{/for}}            </ul>        </li>    {{/for}}    </script>arr = [     {name: "Tom", Hobbies: ["basketball", "soccer"]},     {name: "Jack", Hobbies: ["basketball "," Rugby "]},     {name:" Lucy ", Hobbies: [" swimming "," badminton "]}];var HTML = $ (" #tmp7 "). Render (arr); $ (" #list "). HTML (HTML);

2.2.3 separate for.

　　Syntax: {{for context tmpl= ' template id '/}}

If the logic of the for is more complex, the nested for will complicate our template and make maintenance more difficult; we can separate for, in the example above, you can put for a new template and then specify it through the Tmpl property. Example:

<script type= "text/tmp" id= "TMP8" >        {{for}}        <li>            name:{{:name}}            <ul>                {{for Hobbies tmpl= "#tmp9"/}}            </ul>        </li>    {{/for}}    </script><script type= "text/ TMP "id=" TMP9 ">        <li>{{: #getIndex () + 1}}:{{: #data}}</li>    </script>var HTML = $ (" #tmp8 " ). Render (arr); $ ("#list"). HTML (HTML);

Iii. #data, #index, #parent

As we begin to mention, the template we define is the view, and the object used is the context.

#data The current context, sometimes it is useful, for example, we return the simplest array [1,2,3,4], which cannot be obtained by {{:}}}, by {{#data}}. In addition, you can specify the context, such as hobbies above, the context of the inline for #data is hobbies, and the external #data is the entire arr.

#index the current subscript. should be used #getIndex () to obtain.

#parent the view in which the current context is located. The Parent property can always look up the view, and the data property of the view is the current context. For example, if we want to get the external Name property in the inline for, we can get it by #parent. Parent.data.name.

Iv. Expansion of applications

The basic usage above has already satisfied most of the requirements. The following extensions are all designed to separate views and logic, just imagine that if we have a lot of logical judgments or calculations in our view, all of them are written together, it can be cumbersome and difficult to maintain. The best view is a simple label, and the logic is written in JS. The Jsrender is extended on the view.

4.1 Custom Tag Tag

We can move the logic in the tag to the Custom tab.

　　Syntax: 1. View {{"label name" tag parameter additional parameters}}
2. Logic $.views.tags ({"tag name": function (parameter) {this.tagCtx.props.prefix additional parameter}})

Example:

    <script type= "text/tmp" id= "Tmp10" >        {{for}}            <li>                name:{{:name}}                                            Hobbies: {{format Hobbies prefix= "@"/}}            </li>        {{/for}}             </script>    $.views.tags ({        "format": function (hobbies) {            if (!hobbies | | hobbies.length <= 0) {                return "none";            }            var result = "";            for (var i = 0,length = hobbies.length;i < length; i++) {                result + = "," + This.tagCtx.props.prefix + HOBBIES[I];
   }            result = result.substring (1);            return result;        }    })    var html = $ ("#tmp10"). Render (arr);    $ ("#list"). HTML (HTML);

4.2 Converter Converter

The converter can process the output results, such as case conversion and so on.

　　Syntax: 1. View {"Converter name": Parameter}}
2. js $.views.converters ({"Converter name": function (parameter) {...}})

    <script type= "text/tmp" id= "Tmp11" >            {{for}}            <li>                Upper Name: {{toUpper: #parent. Data.name}}            </li>        {{/for}}       </script>    $.views.converters ({        "ToUpper": function (name) {            if (name) {                return Name.touppercase ();}}    )    var html = $ ("#tmp11"). Render (arr);    $ ("#list"). HTML (HTML)

4.3 Auxiliary function Helper

Extension functions can process the results, logical judgments, and so on.

　　Syntax 1. View {{~ Auxiliary function name (parameter)}}
2. js $.views.helpers ({"Auxiliary function name": function (parameter) {}})

    <script type= "text/tmp" id= "TMP12" >            {{for}}            <li>                name: {: name}}                Hobbies: {{: ~concat ( Hobbies)}}            </li>        {{/for}}       </script>    $.views.helpers ({        "concat": function ( Hobbies) {                        if (!hobbies | | hobbies.length <= 0) {                return "";            }            var result = "";            for (var i = 0,length = Hobbies.length;i < length;i++) {                result + = "&&" + hobbies[i];            }            Return result.substring (2);        }    })    var html = $ ("#tmp12"). Render (arr);    $ ("#list"). HTML (HTML);

V. Summary

Jsrender is still relatively new, it is more convenient to use. But we see that our data and the page is a one-way process, and is a one-way, that is, when our data changes, the view is not automatically updated, and the interface data changes, the actual data can not automatically change. Imagine that if the data and view are bidirectional, and one of the changes can automatically update the other, that's not the best, we just need to manipulate the data and we don't need to manipulate the DOM. This is the mechanism of MVVM, the front-end MVVM framework has many: knockout, angular and so on. The next article will begin the introduction of knockout.

Knockoutjs Learning Notes 02:jsrender template engine