Hogan.js 互动版

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

增加数据

  在查找数据绑定到模板这节中,我们已经把获取的data数据绑定到模板中,并展示到页面中。

  在我们实际应用中,模板快速的绑定数据,使我们更快速的进行操作,我们模仿从后天获取数据,现在我们给数据新加一条默认数据,添加到数组employees中,在重新给模板绑定新的数组,看看列表显示效果。

  实例增加数据,现在我们通过一个增加按钮(add),并为其绑定一个点击事件(click),重新加一条数据,为模板重新赋值。

$('#add').bind('click',function(){
      data.employees.push(
          {firstName: "polo",
          lastName: "yu"}
      );
      $('#sampleArea').html(template.render(data)); // 重新为预编译模板绑定数据,并显示到页面 
})