jQuery模板:jQuery Templates Proposal_jquery

导言（Introduction）

这个提案描述了如何在jquery的核心库中增加模板支持。更为特别是，这个提案描述了一个新的jQuery方法－－名叫render()，该方法可以使你用一段html代码渲染一个JavaScript　对象和javascript数组作为一个模板。

该提案的目的在于使插件开发者可以利用标准的方法声明和渲染模板。有一个标准的方法声明和渲染模板对每一个人都很有裨益：

• 插件开发者可以构建丰富的、数据驱动的插件，如DataGrid插件。插件开发者可以在jQuery的核心库对模板支持的基础上构建插件，这样每一次开发新的插件时，可以避免重新实施渲染模板代码。
• 插件用户可以利用一个标准的语法声明模板。插件用户每次创建模板时不需学习一种新的方法，每次都是从使用新的插件开始。

该提案分两个主要部分。第一部分包含现有模板解决方案简要调查，第二部分是我们的建议，声明和渲染一个模板的方法如何添加到jQuery的核心库中。

现有的模板解决方案

现在已经有了许多JavaScript的解决方案模板，从这方面说，标准化的模板解决方案必然是大势所趋。在本节中，我们向你简要描述四个最流行最有趣的模板。现有的模板解决方案能解决什么？那些特色在jQuery核心中有意义。

微模板

John Resig的微型模板引擎非常小（未压缩仅2KB）。然而，这点小小的代码已经抓到了渲染一个模板的核心功能。

下面是一个用微模板引擎显示单个JavaScript产品对象的例子。

<script src="../jquery-1.4.1.js" type="text/javascript">>;/script>;
<script src="MicroTemplating.js" type="text/javascript">;</script>;
<script type="text/javascript">;
    var product = { name: "Laptop", price: 788.67 };
    $(showProduct);
    function showProduct() {
        $("#results").html( tmpl("productTemplate", product) );
    }
    function formatPrice(price) {
        return "$" + price;
    }
</script>;

tmpl()方法用来从一个product模板和product对象生成一个字符串。其结果分配给一个名叫results的div元素的innerHTML。

product模板在页面body的SCRIPT中定义。

<script type="text/html" id="productTemplate">
    Product Name: <%= name %>
    <br />
    Product Price: <%= formatPrice(price) %>
</script>
<div id="results"></div>

注意，SCRIPT的type属性为“text/ html”。用这种方式来声明web浏览器会忽略SCRIPT里的内容，将其内容当作字符串来对待。

注意，模板包含代表产品名称和价格属性的表达式。调用JavaScript的formatPrice（）方法来格式化产品的价格。在模板里你可以调用任何JavaScript函数。

这里是如何渲染一个product对象数组的示例：

function showProducts() {
    // parse the template
    var template = tmpl("productTemplate");
    // loop through the products
    var results = ”;
    for (var i = 0; i < products.length; i++) {
        results += template(products[i]);
    }
    // show the results
    $("#results").html(results);
}

tmpl()函数支持currying(关于什么currying，可以在网上查阅资料)。如果没有提供数据给tmpl()函数，他将返回一个javascript函数，代表解析的模板。

在上面的代码中，模板被解析，然后为每一个product调用模板方法生成一个字符串。最后，字符串分配给名叫results的div元素的innerHTML。

欢迎大家阅读《jQuery模板:jQuery Templates Proposal…_jquery》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)