apicloud点赞回显的实现-马育民老师

###问题：
类似微博等app，点赞后的点赞按钮是彩色的，未点赞的按钮是黑白色的，本文写的就是实现这种效果

###建表：
微博表
[![](http://www.malaoshi.top//upload/0/0/1EF1gdjOo15Z.png)](http://www.malaoshi.top//upload/0/0/1EF1gdjOo15Z.png)

点赞表[![](http://www.malaoshi.top//upload/0/0/1EF1gdjeDUjc.png)](http://www.malaoshi.top//upload/0/0/1EF1gdjeDUjc.png)

###html代码
```html
<div class="" id="content">

</div>

```
###需要引入js
```javascript

###dot模板
```javascript
<script id="articleTemp" type="text/x-dot-template">
    {{~it:value:index}}
    <div class="c1">
        {{= value.abstract}} {{if(value.isLike ){}} 已点赞 {{}else{}}未点赞{{}}}
    </div>
    {{~}}
</script>
```
###js代码

```javascript
//当前登录人id
var userId = '5b5fc1324ad8356a180bf13b';
    apiready = function() {
        query();
    };
//查询微博列表函数
    function query() {
	//查询weibo2表，查询id、概要、创建时间
        var client = new Resource("A6054550675047", "29AA8940-236F-7B30-FF84-2EC99D2C1524");
        var Model = client.Factory("weibo2");
        Model.query({
            filter: {
                fields: ["id", "abstract", "createdAt"],
                order: "createdAt DESC"
            }
        }, function(ret, err) {
            if (err) {
                //处理错误 err
                alert(JSON.stringify(err));
            } else {
                //处理数据 ret
                alert(JSON.stringify(ret));
                queryLike(ret);
            }
        })
    }
//处理点赞回显函数
    function queryLike(weiboArray) {
        var webiIdArray = [];
        for (var i = 0; i < weiboArray.length; i++) {
            webiIdArray[i] = weiboArray[i].id;
        }
        alert(webiIdArray);

//编译模版
            var interation = doT.template($('#articleTemp').html());
            //将数据显示到网页中
            $('#content').html(interation(weiboArray));
        })

}
```

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