apicloud文章列表页面（dot模版引擎）-马育民老师

关于dot的使用参加链接：
http://www.malaoshi.top/show_1C71L3WLAPI2.html

### 引入js

先引 `jquery`，后引 `doT`

```javascript
<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>

```

### 定义dot模版
```

<script id="articleTemp" type="text/x-dot-template">
    {{~it:value:index}}
        <div onclick='showById("{{= value.id }}")'>
            {{= index+1 }}.{{= value.title }}  {{= value.creatorName }}==={{= value.viewNum }}
        </div>
    {{~}}
</script>
```

### 定义显示数据的div

```
<div id="data_box">

</div>
```

### js代码

```javascript
apiready = function(){
		showArticleList();
	};
function showArticleList(){
		var client = new Resource(APP_INFO.app_id, APP_INFO.app_key);
		var Model = client.Factory("article");
		Model.query({
		    filter:{
		        fields:{"id": true, "title": true, "viewNum": true,"creatorName": true}//或者["id","make","model"]
		    }
		}, function(ret,err){
		    if(err){
		        //处理错误 err
		        
		    }else{
		        //处理数据 ret
		        alert(JSON.stringify(ret));
		        //编译模版
		        var interation = doT.template( $('#articleTemp').html() );
		        //将数据显示到网页中
		        $( '#data_box' ).html(interation( ret ));
		    }
		})
	}
	
function showById(id){
		alert(id);
		api.openWin({
	        name: 'article_detail',
	        url: 'article_detail.html',
	        pageParam:{
	        	"id":id
	        }
        });
	}

```

原文出处：http://www.malaoshi.top/show_1EF8nkHSRlB.html