Hogan.js 互动版

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

修改数据绑定到模板

  我们为employees数据可以直接新增一条数据,也可以对这组数据中的某条数据进行删除,如果是操作数据库真实的数据,我们需要知道数据的id,进行修改操作,然后在把新的内容,重新修改到数据库中。

  在这里我们通过javascript中数组的操作,改变下数组的内容,我们把 John Smith 改成 Tom Smith

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

$('#update').bind('click',function(){
    var arr = data.employees;
    for(var i = 0 ; i < arr.length;i++){
        arr[1].firstName = "Tom";
    }
    $('#sampleArea').html(template.render(data)); // 重新为预编译模板绑定数据,并显示到页面 
})

  在此节中我们学习模板绑定数据实例中,主要是体会直接给模板绑定数据快速,方便,只需要改变数据,重新为模板赋值即可。同时我们也通过前端中简单的对数据操作,实现下增删改查的功能,体会绑定数据。