模板 : element : 使用数据

绑定数据源

在thin.js中可以用以下三种方式将数据源绑定到模板。

1. render参数的data成员
2. element模板的datapath属性
3. element模板的data属性

render参数的data成员

给模板提供数据最常用的方式是作为render的参数的data成员传入。

$(selector).render({
   data:data,
   template:template
});

element模板的datapath属性

还可以使用数据漫游器将已经绑定的数据的子节点绑定到当前element，常用于将数组绑定到表行节点渲染表格。

• 当datapath指向的数据是对象时模板只渲染一次。
• 当datapath指向的数据是数组时模板会对每一行数据渲染一次。
• 当datapath指向的数据为null时模板不渲染。

$(selector).render({
    data: {
        rows: [
            { field1: "aaa", field2: "bbb" },
            { field1: "ccc", field2: "ddd" }
        ]
    },
    template: {
        e: "table",
        t: {
            e: "tr",
            datapath: "rows",
            t: [
                "<td>[[field1]]</td><td>[[field2]]</td>"
            ]
        }
    }
})

element模板的data属性

还可以通过子element模板的data属性将数据注入子模版。

{
    e: "option",
    data: [
        { city: "上海" },
        { city: "北京" },
        { city: "武汉" }
    ],
    t: "[[city]]"
}

使用数据

在字符串模板中使用数据漫游器展示数据

所有末级模板都一定是字符串模板，我们可以在字符串模板中用双方括号调用数据漫游器从绑定的数据源中取值。

"<td>[[localtion/city]]</td>"

除子模版外，element模板的a,style,value,selected的取值也可以用字符串模板调用数据漫游器生成。

在函数模板中使用数据

在函数模板和其他允许使用函数的属性中，thin.js都会将数据和当前dom元素作为参数的成员传递给函数。

使用bind属性实现双向数据绑定

如果在element模板中使用了bind属性指定了数据路径，则在元素渲染时可以将相应的数据作为dom元素的值渲染出来，同时当dom元素的值发生变化时，thin.js也会用onchange事件捕获，并根据数据路径反向将数据自动更新到数据源中。

var data={name:"lee",age:"16"};  
$("container").render({
   data:data,
   template:{e:"form",t:[
      {e:"input",bind:"name"},
      {e:"input",bind:"age"}
   ]}
});

在事件中使用数据

在click事件以及用event捕获的其他事件中，thin.js会将触发事件的dom元素、原始数据以及输入的新数据传给事件处理函数。 参见 模板 : element : 处理事件