Handlebars模板引擎渲染页面

最新推荐文章于 2021-05-10 10:01:19 发布

转载最新推荐文章于 2021-05-10 10:01:19 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/NTWang/p/7368014.html

本文介绍 Handlebars.js 模板引擎的基本使用方法，包括不同数据源（如数组、对象等）的渲染方式。通过示例展示了如何声明模板、绑定数据及将渲染结果插入页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本使用，并简单列举了几种常见的数据格式的渲染方式

js：
var testTpl = Handlebars.compile($('#test').html()); //模板
    var arr = [1,2,3] //数据
    $('#box').append(testTpl(arr)); //调用


html：
<script type="text/x-handlebars-template" id="test">
{{#each this}}
        <li>索引：{{@index}}，内容：{{this}}</li>
{{/each}}
</script>

下面说几种数据源如何渲染数据，js中基本一样，声明模板->声明要渲染数据->调用并插入到页面，不明白看上面基本使用

数据源是Array

js:
var arr = [1,2,3]
html:
{{#each this}}
        <li>索引：{{@index}}，内容：{{this}}</li>
{{/each}}

数据源是数组对象（对象内部包含数组，再次each这个数组即可）

js：
var arr = [
    {'a':'1','b':2,'c':['4','5','6']},
    {'a':'11','b':22,'c':['44','55','66']}
 ];
html：
{{#each this}}
    <li>{{a}}</li>
    <li>{{b}}</li>
    {{#each c}}
        <li>父级索引{{../a}}.{{@index}}：访问父级：{{../a}} 。当前索引：{{@index}}，当前元素：{{this}} </li>
    {{/each}}
{{/each}}

数据源是对象

js：
var context = {
    data:{
        one: "un",
        two: "deux",
        three: "trois"
    }
}
html：
<ul>
    {{#each data}}
        <li>对象的key：{{@key}}，对象的值：{{this}}</li>
    {{/each}}
</ul>
<ol>
    {{#each data}}
        <li>对象的索引：{{@index}}，对象的值：{{this}}</li>
    {{/each}}
</ol>

数据源数对象数组

js：
var context = {
            data: ["one", "two", "three"],
            data2: ["one", "two", "three"],
        };
html：
<ul>
    {{#each data}}
        <li>
            数组的索引：{{@index}} ，索引对应的内容：{{this}}{{#eq @index 0}}王生辉{{/eq}}
        </li>
    {{/each}}
    {{#each data2}}
        <li>
            数组的索引：{{@key}}，索引对应的内容：{{shenghui this}}
        </li>
    {{/each}}
</ul>