jQuery模板提案（3）

PURE(纯粹分离式渲染引擎)

PURE 模板引擎的目的在于使开发人员不使用任何特殊标记来声明模板。使用PURE有两种方法：autoRender()方法或render()方法。

使用autoRender()方法时，PURE自动将JSON的属性名称映射到css的class上。例如，你可以编写下面的代码来显示单个产品。

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

autoRender()通过将product的name和price 属性分别映射到class为name和price 的元素上来显示产品。

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

请注意，模板中没有特殊字符，PURE用纯粹的HTML完成一切。

autoRender()方法依赖于JSON的属性名映射到class名的协议，如果你不想依赖于该协议，你可以用render()方法来代替。

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

请注意，一系列指令和要显示的项目传递给render()。这些选择器将选择器映射到JSON属性名，第一个指令将Id为name的span元素映射到name属性，第二个指令将Id为price的span元素映射到price属性。下面是HTML：

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

PURE也可以用来渲染一个JavaScript对象数组。例如，下面的代码渲染一个product数组。

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

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

由于数组名为product，PURE将每一个product映射到class为product的元素上，以下模板显示所有的三个product。

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