模板渲染和呈现回调

你可以利用传递给render()函数或append()的options参数来指定模板回调函数。有两个回调函数：

• rendering：该函数在模板渲染时立即调用。它作为模板自身内同一$context对象的参数。回调返回flase以防渲染数据项。
• rendered：该函数在模板渲染时立即调用，但是在DOM元素已添加到文档之前。 它同样作为模板自身内同一$context对象的参数。

以下几节讨论使用rendering和rendered函数的几种情况：

执行复杂的计算

想象以下你要计算在模板中显示的每个product的税率，但你又不想计算税率的逻辑出现在模板自身中。此时，你可以像这样在rendering函数中执行税率计算：

<script type="text/javascript">
    jQuery(function() {
        var products = [
          { name: "Product 1", price: 12.99 },
          { name: "Product 2", price: 9.99 },
          { name: "Product 3", price: 35.59 }
        ];
        $("ul").append("#template", products, { rendering: rendering });
       function rendering(context) {
            var item = context.dataItem;
            // setup additional information to be used more clearly within the template
            // (avoids complex expressions)
            item.tax = Math.floor(item.price * 8.75) / 100;
        }
    });
</script>
<script id="template" type="text/html">
 <li>{%= name %} - price with tax {%= price + tax %} </li>
</script>
<ul></ul>

取消模板渲染

你可以利用rendering()回调取消特定模板实例的渲染。下面的代码演示了如何仅渲染标了删除标记的产品。

<script type="text/javascript">
   jQuery(function() {
        var products = [
            { name: "Product 1", price: 12.99 },
            { name: "Product 2", price: 9.99, deleted: true },
            { name: "Product 3", price: 35.59 }
        ];
        $("ul").append("#template", products, { rendering: rendering });
        function rendering(context) {
            if (context.dataItem.deleted) {
                return false;
            }
        }
    });
</script>
<script id="template" type="text/html">
 <li>{%= name %} - {%= price %}</li>
</script>
<ul></ul>

当rendering()返回false时，模板不会显示。在上面的示例代码中，当产品标上删除标记时，模板不会渲染。

嵌套模板

利用回调函数，你可以创建其嵌套模板。例如，下面代码显示了如何显示联系人名单，每个联系人有一个或多个电话号码。contactTemplate 用来显示联系人名单，phoneTemplate 用来显示每个电话号码。

<script type="text/javascript">
    $(function() {   
        var contacts = [
            { name: "Dave Reed", phones: ["209-989-8888", "209-800-9090"] },
            { name: "Stephen Walther", phones: ["206-999-8888"] },
            { name: "Boris Moore", phones: ["415-999-2545"] }
        ];
        $("div").append("#contactTemplate", contacts, {rendered:rendered});
    });
    function rendered(context, dom) {
        $("div.phones", dom)
            .append("#phoneTemplate", context.dataItem.phones);
    } 
</script>
<script id="contactTemplate" type="text/html">
 <div>
     {%= name %}
     <div class="phones"></div>
 </div>
</script>
<script id="phoneTemplate" type="text/html">
 <div>
     Phone: {%= $context.dataItem %}
 </div>
</script>
<div></div>

创建插件

假设你想在模板中使用插件－－如jQuery UI Datepicker。此外，想象以下，你希望插件显示数据项的值。例如，你希望DatePicker 默认显示数据项的一个date属性。在这种情况下，你需要利用rendered()回调创建插件并用数据项的值初始化插件。

例如，下面的代码显示联系人的名单，rendered() 用来创建一个jQuery UI Datepicker插件，并在模板中的一个input元素中附加插件。DataPicker 的默认值为联系人的生日。

<script type="text/javascript">
    $(function() {
        var contacts = [
            { name: "Dave Reed", birthdate: new Date("12/25/1980") },
            { name: "Stephen Walther", birthdate: new Date("12/25/1977") },
            { name: "Boris Moore", birthdate: new Date("12/25/1934") },
            { name: "Eilon Lipton", birthdate: new Date("12/25/2004") },
            { name: "Assad Safiullah", birthdate: new Date("12/25/1954") }
        ];
        $("div").append("#template", contacts, { rendered: rendered });
    });
    function rendered(context, dom) {
        $("input", dom)
            .datepicker({ defaultDate: context.dataItem.birthdate })
    }    
</script>
<script id="template" type="text/html">
 <div>
     {%= name %}
     <br />
     birthdate: <input />
 </div>
</script>
 
<div></div>

无表达式模板

如果你不想任何诸如{%=....%}的表达式出现在模板中，你可以在模板实例中使用rendered函数动态的为一个元素赋值。例如，下面模板显示产品清单。注意，模板只包含HTML标记，没有表达式。

<script type="text/javascript">
    $(function() {
        var products = [
            { name: "Product 1", price: 12.99 },
            { name: "Product 2", price: 9.99 },
            { name: "Product 3", price: 35.59 }
        ];
        $("ul").append("#template", products, { rendered: rendered });
        function rendered(context, dom) {
            $("span.name", dom).html(context.dataItem.name);
            $("span.price", dom).html(context.dataItem.price);
        }
    });
</script>
<script id="template" type="text/html">
 <li><span class="name"></span> - <span class="price"></span></li>
</script>
<ul></ul>

出处：Denis'Blog
责任编辑：moby

上一页 jQuery模板提案 [8] 下一页 jQuery模板提案 [10]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。