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>