dev_listView

多种方式创建动态列表

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

1.for循环

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

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

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

2.artTemplate 模板引擎

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

使用方法：

在你的HTML页面里使用script标签引用artTemplate模板引擎。

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

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

<script id="list" type="text/html">
	<div class="um-listview-wrap" id="listview">
		<ul class="um-list um-no-active">
			{{each list as value i}}
			<li class="um-listview-row">
				<a href="#" class="um-list-item um-swipe-action um-no-icon">
					<div class="um-swipe-btns">
						<span class="um-swipe-btn um-delete">删除</span>
					</div>
					<div class="um-list-item-media msg-info">
						<img alt="" src="{{value.img}}" width=50>
						<span class="um-badge">{{value.msgNum}}</span>
					</div>
					<div class="um-list-item-inner">
						<div class="um-list-item-body">
							<h4 class="um-media-heading fb f16 um-text-overflow">{{value.sender}}</h4>
							<p class="um-gray f14 um-text-overflow">{{value.lastMsg}}</p>
						</div>
						<div class="pr10">
							<span class="um-gray f12">{{value.lastTime}}</span>
						</div>
					</div>
				</a>
			</li>
			{{/each}}
		</ul>
	</div>
</script>

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

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

3.doT 模板引擎

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

使用方法：

在你的HTML页面里使用script标签引用doT模板引擎。

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

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

<script type="text/x-dot-template" id="list">
	<div class="um-listview-wrap" id="listview">
		<ul class="um-list um-no-active">
			{{~it.list:value:index }}
			<li class="um-listview-row">
				<a href="#" class="um-list-item um-swipe-action um-no-icon">
					<div class="um-swipe-btns">
						<span class="um-swipe-btn um-delete">删除</span>
					</div>
					<div class="um-list-item-media msg-info">
						<img alt="" src="{{=value.img}}" width=50>
						<span class="um-badge" data-bind="text:msgNum,visible:msgNum>0">{{=value.msgNum}}</span>
					</div>
					<div class="um-list-item-inner">
						<div class="um-list-item-body">
							<h4 class="um-media-heading fb f16 um-text-overflow" data-bind="text:sender">{{=value.sender}}</h4>
							<p class="um-gray f14 um-text-overflow" data-bind="text:lastMsg">{{=value.lastMsg}}</p>
						</div>
						<div class="pr10">
							<span class="um-gray f12" data-bind="text:lastTime">{{=value.lastTime}}</span>
						</div>
					</div>
				</a>
			</li>
			{{~}}
		</ul>
	</div>
</script>

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

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

4.Knockout

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

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

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

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

<div class="um-listview-wrap" id="listview">
    <ul class="um-list um-no-active" data-bind="foreach: data">
        <li class="um-listview-row">
            <a href="#" class="um-list-item um-swipe-action um-no-icon">
            <div class="um-swipe-btns">
                <span class="um-swipe-btn um-delete">删除</span>
            </div>
            <div class="um-list-item-media msg-info">
                <img alt="" data-bind="attr:{'src': img}" width=50>
                <span class="um-badge" data-bind="text:msgNum,visible:msgNum>0"></span>
            </div>
            <div class="um-list-item-inner">
                <div class="um-list-item-body">
                    <h4 class="um-media-heading fb f16 um-text-overflow" data-bind="text:sender"></h4>
                    <p class="um-gray f14 um-text-overflow" data-bind="text:lastMsg"></p>
                </div>
                <div class="pr10">
                    <span class="um-gray f12" data-bind="text:lastTime"></span>
                </div>
            </div> </a>
        </li>
    </ul>
</div>

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

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

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