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

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4