JsRender 学习总结

标签：lan   als   div   [1]   type   ext   用法   mat   .com   

jsRender 三个最重要的概念：模板、容器和数据。 最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。

 一、基础。

       {{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。　

{{: pathOrExpr}}             (value) 值类型  
{{> pathOrExpr}}             (HTML-encoded value) html编码后的值  
{{* mycode}}                 (using code) 代码  

二、逻辑判断和循环。

       if-else

 　　语法：{{if condition}} ... {else condition} ... {{else}}... {{/if}}

      例子： 

var html = $("#tmp4").render(data);
$("#list").html(html);

 for

   　语法： {{for}} ... {{/for}}

 　　例子：

var arr = [
    { ID: 1, Name: "tom" },
    { ID: 2, Name: "jack" },
    { ID: 3, Name: "lucy"}
];
var html = $("#tmp5").render(arr);
$("#list").html(html);

　嵌套for

　　语法：语法：{{for}}...{{for 当前上下文}} ... {{/for}} ... {{/for}}

　　例子：

arr = [
{ name: "tom", hobbies: ["篮球", "足球"] },
{ name: "jack", hobbies: ["篮球", "橄榄球"] },
{ name: "lucy", hobbies: ["游泳", "羽毛球"] }
];
var html = $("#tmp7").render(arr);
$("#list").html(html);

分离for

　　语法：{{for 上下文 tmpl="模板id" /}}

　　如果for的逻辑比较复杂，嵌套的for就会让我们的模板变得复杂，维护难度加大；我们可以将for分离，以上面的例子，可以将for放到一个新的模板，然后通过 tmpl属性指定。　　

　　例子：

var html = $("#tmp8").render(arr);
$("#list").html(html);

嵌套循环使用参数访问父级数据，直接看例子：

三、扩展应用

　　　　上面的基本用法已经可以满足大部分需求了。以下几个扩展都是为了分离视图和逻辑的，试想一下，如果我们的视图里还需要大量的逻辑判断或计算，全都写在一起，那会非常麻烦和难以维护。视图最好就是简单的标签，而逻辑都写在js里。jsRender是在视图上进行扩展的。

　　组合模板： include 组合模板 

　　语法：include tmpl="模板id"

　　例子：

{{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。

    

 自定义标签：views.tags和 views.helpers

       语法：

　　    views.tags

　　　　　　1.视图 {{"标签名称" 标签参数 附加参数}}

　　　　　　2.逻辑 $.views.tags({"标签名称":function(参数){this.tagCtx.props.prefix附加参数}})   //prefix附加参数是你传的参数名称

         views.helpers

　　　　　　1、视图{{~“标签名称”(附加参数)}}

　　　　　　2、逻辑$.views.helpers（{“标签名称”：function（参数）{//具体逻辑}}）

　　　因为两者基本都一样，但是views.helpers比较灵活

　　　　例子：

不推荐使用 $.views.tags 这种自定义标签 建议使用$.views.helpers 


    
views.tags
    


名称
            
单价
        










    
views.helpers
    


名称
            
单价
        

　转换器 converter

      转换器可以对输出结果进行处理，例如大小写转换等。

     语法：

　　　　1. 视图 {{"转化器名称":参数}}

　　　　2. js $.views.converters({"转换器名称":function(参数){...}})

$.views.converters({
    "toUpper":function(name){
        if(name){
           return name.toUpperCase();
        }
    }
})
var html = $("#tmp11").render(arr);
$("#list").html(html)

　转载自：http://www.cnblogs.com/panmy/p/5927269.html

官网：www.jsviews.com

JsRender 学习总结

标签：lan   als   div   [1]   type   ext   用法   mat   .com   

原文地址：http://www.cnblogs.com/guohu/p/7145885.html