apicloud文章列表页面(dot模版引擎)

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

引入js

先引 jquery,后引 doT

<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 }}&nbsp;&nbsp;{{= value.creatorName }}==={{= value.viewNum }}
        </div>
    {{~}}
</script>

定义显示数据的div

<div id="data_box">

</div>

js代码

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
            }
        });
    }

原文出处:/show_1EF8nkHSRlB.html