laytpl语法_适应laytpl 渲染模板数据

前言

当我们异步读取数据过来的时候，还要通过手动赋值，显示在页面上吗，那样你就太OUT了，哥告诉你个新方式。

那就是 laytpl 插件

用法一：渲染单条数据

姓名

性别

班级

分数

{{d.Name}}{{d.Sex}}{{d.Class}}{{d.Core}}

function UseInfo1() {

var html = $("#box-class-tem1").html(); //获取模板

/*单条数据*/

var ojb = {

Name: "肚子",

Sex: "14",

Class: "五年级",

Core: "99"

};

laytpl(html).render(ojb, function (result) {

$("#Box").append(result);

});

}

用法二：渲染多条数据

姓名

性别

班级

分数

{{# for(var i = 0; i < d.list.length; i++){ }}

{{d.list[i].Name}}{{d.list[i].Sex}}{{d.list[i].Class}}{{d.list[i].Core}}

{{# } }}

function UseInfo2() {

var html = $("#box-class-tem2").html(); //获取模板

/*多条数据*/

var data = {

list: [{

Name: "肚1",

Sex: "14",

Class: "五年级",

Core: "99"

},

{

Name: "肚2",

Sex: "14",

Class: "五年级",

Core: "99"

}

]

};

laytpl(html).render(data, function (result) {

$("#Box").append(result);//异步渲染数据

});

}

常用的方法应该就这两种，有不详细的地方，可以参考官方解释。谢谢