JS技术

jQuery模板:jQuery Templates Proposal_Javascript教程(6)

字号+ 作者:H5之家 来源:H5之家 2015-10-01 11:18 我要评论( )

script type=text/javascript jQuery(function() { var products = [ { name: Product 1, price: 12.99, salePrice: 10.99 }, { name: Product 2, price: 9.99, salePrice: 7.99 }, { name: Product 3, price: 35.5

<script type="text/javascript">
    jQuery(function() {
        var products = [
            { name: "Product 1", price: 12.99, salePrice: 10.99 },
            { name: "Product 2", price: 9.99, salePrice: 7.99 },
            { name: "Product 3", price: 35.59, salePrice: 33.59 }
        ];
        $("ul").append("#template", products, { showSalePrice: true });    
    });
</script>
<script id="template" type="text/html">
 <li>
     {%= name %} - 
     {%= $context.options.showSalePrice ? salePrice : price %}
 </li>
</script>
<ul></ul>
 

注意如何在模板中根据$ context.options.showSalePrice属性来显示正常价格或零售价格。

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评