Handlebars 学习1

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="libs/jquery.js"></script>
    <script type="text/javascript" src="libs/handlebars.js"></script>
</head>
<body>
<script id="demo" type="text/x-Handlebars-template">
{{#list people}}
    {{firstName}} {{lastName}}
{{/list}}
</script>
 
<div id="temp"></div>
<script type="text/javascript">
var context={
    people:[
        {firstName:"wang",lastName:"wen"},
        {firstName:"Li",lastName:"zenrui"},
        {firstName:"wang",lastName:"zian"}
    ]
}
Handlebars.registerHelper("list",function(item,options){
    var out="<ul>";
    for(var i=0,l=item.length;i<l;i++){
        out=out+"<li>"+options.fn(item[i])+"</li>";
    }
    return out+"</ul>";
})
 
var source=$("#demo").html(),
    template=Handlebars.compile(source);
$("#temp").html(template(context));
</script>
</body>
</html>

最近研究了下handlebars，感觉此模板简单易学推荐给大家

posted on 2013-04-16 21:29 Ijavascript 阅读(735) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

To be or not to be.That is a question!

导航

公告

Handlebars 学习1