中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

在jQuery core中增加模板支持

這部分包含一個提案－－給jQuery核心中添加一個聲明和渲染模板的標準方法。這節(jié)包括模板API、示例代碼和討論要點。

API

jQuery.fn.render

通過給單個的數(shù)據(jù)項或一組數(shù)據(jù)項應用一個模板來生成DOM元素。

jQuery("#template")
   .render(arrayOrObject, options)
   .appendTo("selector");

參數(shù)

示例

下面是一個使用render()方法的簡單例子。render()方法用來以列表的方式顯示系列產(chǎn)品的name和price。

<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}
  ];
 
  $("#template")
     .render(products) 
     .appendTo("ul");
});
</script>
<script id="template" type="text/html">
 <li>{%= name %} - {%= price %}</li>
</script>
<ul></ul> 

執(zhí)行上面的代碼得到的是下面的無需列表。

• 產(chǎn)品1 - 12.99
• Product 2 – 9.99產(chǎn)品2 - 9.99
• Product 3 – 35.59產(chǎn)品3 - 35.59

jQuery DOM操作

jQuery DOM操作方法支持聲明一個模板。例如，你可以使用jQuery.fn.append方法：

jQuery("selector")
   .append("#template", arrayOrObject, options);

參數(shù)

示例

下面的代碼使用append()方法而不是render()方法在一個無需列表中顯示系列產(chǎn)品的name和price。

<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);
});
</script>
<script id="template" type="text/html">
 <li>{%= name %} - {%= price %}</li>
</script>
<ul></ul> 

jQuery.templates

你可以指定一個或多個編譯的模板給Query.templates對象設置。當你想給模板一個語義化的名字以便在一個文檔中很方便的多次使用同一模板時，這很有用。

用jQuery.tmpl()函數(shù)編譯一個模板

示例

<script type="text/javascript">
    // Assign compiled template
    jQuery.templates.foo = jQuery.tmpl("<li>{%=name%}</li>");
    // use name foo as template in append() method:
    jQuery("#container").append("foo", products);
</script>

jQuery.tmplFn

在一個模板實例中，你可以使用兩個內(nèi)置的函數(shù)text()和html()渲染一個數(shù)據(jù)項。你可以通過給jQuery.tmpFn對象指定一個新的函數(shù)在模板實例中擴展一組可用的函數(shù)。

下面的代碼向你演示了如何創(chuàng)建even()函數(shù)，該函數(shù)在輪替模板時返回true。在下面的示例中，even()函數(shù)用來在模板中交替呈現(xiàn)粗體行。

<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 }
        ];
        $.tmplFn.even = function() {
            var context = jQuery._.context;
            return (context.index % 2 === 0);
        };
        $("div").append("#template", products);
    });
</script>
<script id="template" type="text/html">
  <div>
  {% if (even()) { %}
     <b> {%= name %} </b>
  {% } else { %}
     {%= name %} 
  {% }; %} 
  </div>
</script>
<div>
</div>

出處：
責任編輯：moby

上一頁 jQuery模板提案 [5] 下一頁 jQuery模板提案 [7]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。