列表加载显示（网页）

网页中的列表加载一般不会用标签追加的方式去实现，很容易因为标点符号等问题出错。博主虽然为初学者，但是也坚决不要踩这个坑！！！哈哈。。。也要学会使用模板来实现。网上百度了一个轻量级的模板：doT.min.js。使用起来也很简单粗暴！
先写好列表其中一项的布局样式即可，也就是Android中所谓的的item样式。
1、实现要引入这个js

2、写样式，注意：外层是script标签包含。其实这属于一个执行的方法，只不过是把写好的样式移到这里面而已。

it:就是你要循环的列表数组arr，可以通过it.length获取数组的长度
bean：就是数组中的每个bean实体，属性都在里面
index：就是数组的下标position，很好理解

{{=}}   相当于赋值

{{~it:bean:index}}//数组循环的起始符

{{~}}//数组循环的结束符
这就是相当于循环那个列表数组了。

还有一种常用的就是if类型的判断

{{? bean.name=='月影'}}  //相当于if，if判断的起始符
	//吧啦吧啦1
{{??}}   //相当于else
   //吧啦吧啦2
{{?}}//if判断结束符

3、一进入页面的时候就加载数据：
先来一段模拟ajax请求获取的数据：

var json = [{"name": "张三","age": 31,"fun": "吃东西","url":"http://img05.tooopen.com/images/20140328/sy_57865838889.jpg"},{"name": "李四","age": 44,"fun": "睡觉","url":"http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg"},{"name": "王五","age": 55,"fun": "打游戏","url":"http://img05.tooopen.com/images/20140328/sy_57865838889.jpg"}];

apiready = function() {
        //编译模板函数
        var tempFn = doT.template($api.byId('temp').innerHTML);
        //数据渲染
        $api.html($api.byId('content'), tempFn(json));
    };

    function loadImage(ele) {
        var url = $api.attr(ele, 'url');
        if (url) {
          api.imageCache({
              url: url
          }, function(ret, err){
              if (ret) {
                ele.src = ret.url;
                $api.attr(ele, 'url','');
              }
          });
        }
    }

    function check(name) {
       api.toast({
           msg: name,
           duration: 2000,
           location: 'bottom'
       });
    }