jQuery.loadTemplate客户端模板

jQuery.Template虽然用起来没有Mustache简洁和方便，还是学习了解一下，做个笔记。

模板可以定义在页面script标签，如下

<script type="text/html" id="template">
<div data-content="author"></div>
<div data-content="date"></div>
<img data-src="authorPicture" data-alt="author"/>
<div data-content="post"></div>
</script>

也可以定义到独立的html文件中，好处是可以使用浏览器缓存，例如：

<div style="margin:50;border:solid 1px red">

<div data-content-text="author"></div>
<div data-content="date"></div>
<img data-src="authorPicture" data-alt="author" />
<div data-content="post"></div>
</div>

<hr />

在客户端调用，如果数组数据，模板自动循环重复输出

//$("#template-container").loadTemplate($("#template"),
// {
//     author: 'Joe Bloggs',
//     date: '25th May 2013',
//     authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
//     post: 'This is the contents of my post'
// });

$("#template-container").loadTemplate("Templates/template.html",
[{
author: 'Joe Bloggs',
date: '25th May 2013',
authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
post: 'This is the contents of my post'
},
{
author: 'Wilson就是看到看看',
date: '25th May 2013',
authorPicture: 'https://www.baidu.com/img/bd_logo1.png',
post: 'This is the contents of my post'
}
]);

使用jquery.template 输出table

html:

<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>

template:

<tr>
<td data-content="id"></td>
<td data-content="name"></td>
</tr>

javascript:

var data = [];

for (var i = 0; i < 10; i++) {
data.push({ "id": i, "name": "user_name_" + i.toString() });
}
$("#tbody").loadTemplate("Templates/tbList.html", data);

参考：https://github.com/codepb/jquery-template

数据绑定属性

There are a number of different bindings and ways to bind the data. The following attributes are available:

"data-innerHTML" (>= 1.4.5) - binds the value supplied to the content (innerHTML) of the element (uses $(elem).html(value))
"data-content" - alias for the newer "data-innerHTML"
"data-content-text" - binds the value supplied to the content of the element as text (uses $(elem).text(value))
"data-content-append" - appends the value to the end of the element (uses $(elem).append(value))
"data-content-prepend" - prepends the value to the beginning of the element (uses $(elem).prepend(value))
"data-id" - sets the id of the element to the value provided (uses $(elem).attr("id", value));
"data-href" - sets the href value of the element to the value provided (uses $(elem).attr("href", value));
"data-alt" - sets the alt value of the element to the value provided (uses $(elem).attr("alt", value));
"data-value" - sets the value attribute of the element to the value provided (uses $(elem).val(value))
"data-class" - sets the class attribute of the element to the value provided (uses $(elem).class(value))
"data-link" - sets the innerHtml of the element to be a link to the value provided (wraps the content in an <a> tag).
"data-link-wrap" - wraps the element in a link to the value provided. Same as "data-link", but the <a> tag wraps the element as well as the content.
"data-options" - adds options to a select box. The value for this should reference an array of strings, each option will be output as a separate option. The value will be the same as the displayed text for each option. For a more powerful version of this look at the data-template-bind option.

自定义格式化方法

$.addTemplateFormatter({
UpperCaseFormatter : function(value, template) {
return value.toUpperCase();
},
LowerCaseFormatter : function(value, template) {
return value.toLowerCase();
},
SameCaseFormatter : function(value, template) {
if(template == "upper") {
return value.toUpperCase();
} else {
return value.toLowerCase();
}
}
});

模板

<tr>
<td data-content="id"></td>
<td data-content="name"  data-format="LowerCaseFormatter"></td>
</tr>