网络编程
位置：首页>> 网络编程>> JavaScript>> jQuery模板提案（7）

jQuery模板提案（7）

作者：dishuipiaoxiang　来源：Denis'Blog　发布时间：2010-03-30 18:27:00　

标签：jquery,模板,Javascript,对象

jQuery.tmplFn

在一个模板实例中，你可以使用两个内置的函数text()和html()渲染一个数据项。你可以通过给jQuery.tmpFn对象指定一个新的函数在模板实例中扩展一组可用的函数。

下面的代码向你演示了如何创建even()函数，该函数在轮替模板时返回true。在下面的示例中，even()函数用来在模板中交替呈现粗体行。

<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>

模板语法

内嵌表达式

表达式可以用{％= ... ％} 的语法形式插入，这个分隔符最大限度的减少了编码标记的机会，同时避免与现有的服务器端和客户端的扩展标记相冲突（例如：{％=...％}可能与ASP和 ASP.NET相冲突）。

示例

简单的数据插入：

<script type="text/html" id="tmp1">
    <li>{％= last ％}, {％= first ％}</li>
</script>

表达式为javascript，你可以调用任何JavaScript函数用或使用更复杂的表达式。但是，注意，保持模板尽可能的简单是首选，后面要描述的两个回调有助于理解这些。

<script type="text/html" id="tmp1">
    <li>{％= last + " " + first ％}</li>
</script>

第一页 上一页 5 6
7
8 9 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com