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

PURE(純粹分離式渲染引擎)

PURE 模板引擎的目的在于使開發(fā)人員不使用任何特殊標(biāo)記來聲明模板。使用PURE有兩種方法：autoRender()方法或render()方法。

使用autoRender()方法時(shí)，PURE自動將JSON的屬性名稱映射到css的class上。例如，你可以編寫下面的代碼來顯示單個(gè)產(chǎn)品。

$(showProduct);
function showProduct() {
    var product = { name: "Laptop", price: 788.67 };
    $('div.product').autoRender(product);
}

autoRender()通過將product的name和price 屬性分別映射到class為name和price 的元素上來顯示產(chǎn)品。

<div class="product">
    Product Name: <span class="name"></span>
    <br />
    Product Price: <span class="price"></span>        
</div>

請注意，模板中沒有特殊字符，PURE用純粹的HTML完成一切。

autoRender()方法依賴于JSON的屬性名映射到class名的協(xié)議，如果你不想依賴于該協(xié)議，你可以用render()方法來代替。

function showProduct() {
    var product = { name: "Laptop", price: 788.67 };
    var directives = { 'span#name' : 'name', 'span#price': 'price'};
    $('div.product').render(product, directives);
}

請注意，一系列指令和要顯示的項(xiàng)目傳遞給render()。這些選擇器將選擇器映射到JSON屬性名，第一個(gè)指令將Id為name的span元素映射到name屬性，第二個(gè)指令將Id為price的span元素映射到price屬性。下面是HTML：

<div class="product">
    Product Name: <span id="name"></span>
    <br />
    Product Price: <span id="price"></span>        
</div>

PURE也可以用來渲染一個(gè)JavaScript對象數(shù)組。例如，下面的代碼渲染一個(gè)product數(shù)組。

function showProducts() {
    var data = { "products": [
            { name: "Laptop", price: 788.67 },
            { name: "Comb", price: 2.50 },
            { name: "Pencil", price: 1.99 }
        ]};

    $('#productTemplate').autoRender(data);
}

由于數(shù)組名為product，PURE將每一個(gè)product映射到class為product的元素上，以下模板顯示所有的三個(gè)product。

<div id="productTemplate">
<div class="products">
    Product Name: <span class="name"></span>
    <br />
    Product Price: <span class="price"></span>        
</div>
</div>

出處：
責(zé)任編輯：moby

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

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