Hogan.js 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

查找数据绑定到模板

假设我们现在有data数据是请求从后台返回的数据,这组数据是记录员工的姓名的

var data = {
            employees: [
            {   firstName: "Christophe",
                lastName: "Coenraets"},
                ...
            ]
      };

通过编译compile()方法编译,模板中通过{{占位符}}要绑定的数据形式,我们现在以列表形式展示数据。

Hogan.compile("Employees:<ul>{{#employees}}" +
                            "<li>{{firstName}} {{lastName}}</li>" +
                            "{{/employees}}</ul>");

通过render()方法,渲染要绑定的数据并替换掉模板中的占位符。