jquery.tmpl.min.js--前端实现模版--数据绑定-创新互联

{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

    ${ID}{{= Name}}
        {{if Status}}
            Status${Status}
        {{else App}}
            App${App}
        {{else}}
            None
        {{/if}}
    


　　var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
    $("#ifelse").tmpl(users).appendTo('#div_ifelse');

{{html}} 输出变量html,但是没有html编码，适合输出html代码

    
　　　　${ID}
　　　　{{= Name}}
    　　${html}
    　　{{html html}}
    


　　var user = { ID: 'think8848', Name: 'Joseph Chan', html: 'html' };
  　$("#html").tmpl(user).appendTo('#div_html');

{{tmpl}} 嵌套模版

    
    　　${ID}
    　　{{tmpl($data) '#tmpl2'}}
        


    {{each Name}}${$value}  {{/each}}  


　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
   $("#tmpl1").tmpl(users).appendTo('#tmpl');

{{wrap}},包装器

    

    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        
One
        

            First content
        
        
Two
        

            And more content...
        
    {{/wrap}}
    

    
        
            {{each $item.html("h4", true)}}
                
                    ${$value}
                
            {{/each}}
        
        
            {{each $item.html("div")}}
                
                    {{html $value}}
                
            {{/each}}
        
    
    
 
        $(function () {
            $('#myTmpl').tmpl().appendTo('#wrapDemo');
        });
    

$data $item $item代表当前的模板；$data代表当前的数据。

     
　　　　${$data.ID}
　　　　${$item.getName(" ")}
　　　


 　　var users = [{ ID: 'think8848', Name: ['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];
     $("#item_data").tmpl(users,
                {
                getName: function (spr) {
                   return this.data.Name.join(spr);
                }
                }).appendTo('#div_item_data');

 $.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。