目录

多种方式创建动态列表

iUAP Mobile 是一个开源的移动开发平台，能够引用第三方框架。本文通过引用不同的框架和模板引擎，创建相同的动态列表。

1.for循环

用原生js或者使用jq开发动态列表：

  1. for(var i=0;i<jsonArray.length;i++){
  2.     var item=jsonArray[i];
  3.     var $li=$('<li class="um-listview-row">' +
  4.             '<a href="#" class="um-list-item um-swipe-action um-no-icon">' +
  5.             '<div class="um-swipe-btns"> <span class="um-swipe-btn um-delete">删除</span> ' +
  6.             '</div>' +
  7.             ' <div class="um-list-item-media msg-info"> <img alt="" src="'+item.img+'" width=50>' +
  8.             ' <span class="um-badge">'+item.msgNum+'</span> </div> ' +
  9.             '<div class="um-list-item-inner"> <div class="um-list-item-body"> ' +
  10.             '<h4 class="um-media-heading fb f16 um-text-overflow">'+item.sender+'</h4> ' +
  11.             '<p class="um-gray f14 um-text-overflow">'+item.lastMsg+'</p> </div> ' +
  12.             '<div class="pr10"> <span class="um-gray f12">'+item.lastTime+'</span> </div> ' +
  13.             '</div> </a></li>');
  14.     $li.appendTo($ul);
  15. };

遍历后台返回的数据，每循环一次动态创建生成一个li标签，将数据以变量的形式添加到标签字符串中，将字符串拼接到一起并把li标签添加到ul中，这就生成了一个列表。for循环代码量较多，不利于维护，适用于demo开发或者轻应用开发，不适合大型程序开发；

2.artTemplate 模板引擎

artTemplate是新一代javascript模板引擎,它采用预编译方式让性能有了质的飞跃，并且充分利用javascript引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。更多介绍请参考artTemplate官网；

使用方法：
1、在你的HTML页面里使用script标签引用artTemplate模板引擎。

  1. <script type="text/javascript" src="js/artTemplate.js"></script>

2、创建一个script标签标签的属性为’type=text/html’，并加上属性id，示例代码：

  1. <script id="list" type="text/html">
  2.        <div class="um-listview-wrap" id="listview">
  3.         <ul class="um-list um-no-active">
  4.             {{each list as value i}}
  5.             <li class="um-listview-row">
  6.                 <a href="#" class="um-list-item um-swipe-action um-no-icon">
  7.                     <div class="um-swipe-btns">
  8.                         <span class="um-swipe-btn um-delete">删除</span>
  9.                     </div>
  10.                     <div class="um-list-item-media msg-info">
  11.                         <img alt="" src="{{value.img}}" width=50>
  12.                         <span class="um-badge">{{value.msgNum}}</span>
  13.                     </div>
  14.                     <div class="um-list-item-inner">
  15.                         <div class="um-list-item-body">
  16.                             <h4 class="um-media-heading fb f16 um-text-overflow">{{value.sender}}</h4>
  17.                             <p class="um-gray f14 um-text-overflow">{{value.lastMsg}}</p>
  18.                         </div>
  19.                         <div class="pr10">
  20.                             <span class="um-gray f12">{{value.lastTime}}</span>
  21.                         </div>
  22.                     </div>
  23.                 </a>
  24.             </li>
  25.             {{/each}}
  26.         </ul>
  27.     </div>
  28. </script>

3、创建完模板后在业务代码中通过获取script标签的id属性值将数据绑定到模板中，最后将模板添加到dom结构中，示例代码：

  1. var data={list:jsonArray};
  2. var html = template('list', data);
  3. $('.um-content').html(html);

3.doT 模板引擎

dot.js是一个模板框架，在web前端使用。doT.js特点是快，小，无依赖其他插件。更多请参考doT 官网;

使用方法：
1、在你的HTML页面里使用script标签引用doT模板引擎。

  1. <script type="text/javascript" src="js/doT.js"></script>

2、创建一个script标签标签的属性为’text/x-dot-template’，并加上属性id，示例代码：

  1. <script type="text/x-dot-template" id="list">
  2.     <div class="um-listview-wrap" id="listview">
  3.         <ul class="um-list um-no-active">
  4.             {{~it.list:value:index }}
  5.             <li class="um-listview-row">
  6.                 <a href="#" class="um-list-item um-swipe-action um-no-icon">
  7.                     <div class="um-swipe-btns">
  8.                         <span class="um-swipe-btn um-delete">删除</span>
  9.                     </div>
  10.                     <div class="um-list-item-media msg-info">
  11.                         <img alt="" src="{{=value.img}}" width=50>
  12.                         <span class="um-badge" data-bind="text:msgNum,visible:msgNum>0">{{=value.msgNum}}</span>
  13.                     </div>
  14.                     <div class="um-list-item-inner">
  15.                         <div class="um-list-item-body">
  16.                             <h4 class="um-media-heading fb f16 um-text-overflow" data-bind="text:sender">{{=value.sender}}</h4>
  17.                             <p class="um-gray f14 um-text-overflow" data-bind="text:lastMsg">{{=value.lastMsg}}</p>
  18.                         </div>
  19.                         <div class="pr10">
  20.                             <span class="um-gray f12" data-bind="text:lastTime">{{=value.lastTime}}</span>
  21.                         </div>
  22.                     </div>
  23.                 </a>
  24.             </li>
  25.             {{~}}
  26.         </ul>
  27.        </div>
  28. </script>

3、创建完模板后在业务代码中将模板渲染到页面中，示例代码：

  1. var data={list:jsonArray};
  2. var evalText = doT.template($("#list").text());
  3. $("#main").html(evalText(data));

4.Knockout

Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新（比如：更新依赖于用户的行为或者外部数据源的改变），KO能够很简单的帮你实现并且很容易维护。Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。提供了声明式绑定、UI界面自动刷新、依赖跟踪、模板等重要的概念。具体内容请参照knockout官网。

1、在你的HTML页面里使用script标签引用Knockout类库文件。

  1. <script type="text/javascript" src="./js/knockout.js"></script>

2、通过数据绑定的方式，将后台返回的数据绑定的dom结构上，示例代码：

  1. <div class="um-listview-wrap" id="listview">
  2.     <ul class="um-list um-no-active" data-bind="foreach: data">
  3.         <li class="um-listview-row">
  4.             <a href="#" class="um-list-item um-swipe-action um-no-icon">
  5.             <div class="um-swipe-btns">
  6.                 <span class="um-swipe-btn um-delete">删除</span>
  7.             </div>
  8.             <div class="um-list-item-media msg-info">
  9.                 <img alt="" data-bind="attr:{'src': img}" width=50>
  10.                 <span class="um-badge" data-bind="text:msgNum,visible:msgNum>0"></span>
  11.             </div>
  12.             <div class="um-list-item-inner">
  13.                 <div class="um-list-item-body">
  14.                     <h4 class="um-media-heading fb f16 um-text-overflow" data-bind="text:sender"></h4>
  15.                     <p class="um-gray f14 um-text-overflow" data-bind="text:lastMsg"></p>
  16.                 </div>
  17.                 <div class="pr10">
  18.                     <span class="um-gray f12" data-bind="text:lastTime"></span>
  19.                 </div>
  20.             </div> </a>
  21.         </li>
  22.     </ul>
  23. </div>

3、在业务逻辑的代码中将数据双向绑定到dom结构中，示例代码：

  1. //构造控件实例
  2. var listview = UM.listview("#listview");
  3. //创建一个列表对象
  4. var ViewModel = function() {
  5. };
  6. //示例话列表对象
  7. var viewModel = new ViewModel();
  8. //将data数据绑定到对象上，并自动探测到相关的依赖
  9. viewModel.data = ko.observableArray(jsonArray);
  10. //激活konckout
  11. ko.applyBindings(viewModel);

多种方式创建动态列表的测试demo的
github 地址

文档更新时间: 2018-06-06 13:54