网络编程
位置:首页>> 网络编程>> JavaScript>> jQuery模板提案(5)

jQuery模板提案(5)

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

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

在jQuery core中增加模板支持

这部分包含一个提案--给jQuery核心中添加一个声明和渲染模板的标准方法。这节包括模板API、示例代码和讨论要点。

API

jQuery.fn.render

通过给单个的数据项或一组数据项应用一个模板来生成DOM元素。

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

参数

参数类型描述
data任何数据对象任何数据对象 如果是数组,为每一项实例化化一次。否则,该模板仅实例化一次
options对象对象的字面意义代表可选设置。你可以设置一个渲染和渲染的事件处理程序。你可以传递任何值,这些值将被传入到模板中

示例

下面是一个使用render()方法的简单例子。render()方法用来以列表的方式显示系列产品的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>

 

执行上面的代码得到的是下面的无需列表。

  • 产品1 - 12.99

  • Product 2 – 9.99产品2 - 9.99

  • Product 3 – 35.59产品3 - 35.59

0
投稿

猜你喜欢

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