jQuery模板提案（10）

模板渲染和呈现回调

你可以利用传递给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时，模板不会显示。在上面的示例代码中，当产品标上删除标记时，模板不会渲染。