# 评论列表
在 [文章页](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 这个链接中，我们可以看到，里边即有 评论列表，其关键代码如下：
```
<!--评论列表/start-->
<div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">评论</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;">
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
<!--start-->
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="images/head.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">故事仍在继续</div>
<div><i class="aui-iconfont aui-icon-laud"></i>8</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
很赞的文章，炒鸡稀饭，这篇文章的作者还真是一个性情中人啊！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！！大家说一说是不是啊！
</div>
<div class="aui-info">
2016-10-6 10:00
</div>
</div>
</div>
</li>
<!--end-->
</ul>
</div>
<!--评论列表/end-->
```
哇塞塞，好长啊！其实没有那么长了，都是重复的，为了好看，才这么放的！
## 方法及步骤
我们将采用以下三种方法来实现！是不是很简单呢？和评论列表几乎是一样一样的！只不过API不一样，为了方便开发，我还是把步骤以及代码贴出来吧！
>1、去掉内容中间的内容，并赋ID值
2、引用doT.js并加入script模板
3、用js调用远程api并赋值
### 第1步：去掉内容中间的内容，并赋ID值
操作后，我们就剩下了：
```
<!--评论列表/start-->
<div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">评论</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;" id="user_comment_html">
</ul>
</div>
<!--评论列表/end-->
```
### 第2步：引用doT.js并加入script模板
操作后下的相关代码，其实就是把中间的一些重复的代码放到中间，再把没有代码的加个界面崦已！
```
<script type="text/javascript" src="../../../script/assets/doT.min.js"></script>
<!--有评论-->
<script id="user_comment_script" type="text/x-dot-template" >
{{ for (var i = 0; i< it.length; i++){ }}
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="{{=it[i].avatar}}" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">{{=it[i].full_name}}</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
{{=it[i].content}}
</div>
<div class="aui-info">
{{=it[i].createtime}}
</div>
</div>
</div>
</li>
{{ } }}
</script>
<!--暂无评论-->
<script id="user_comment_null_script" type="text/x-dot-template" >
<li class="aui-list-item">
<div class="aui-list-item-text">
暂无评论
</div>
</li>
</script>
```
### 第3步：用js调用远程api并赋值
至于相关的set_doT函数 和 r_ajax ，可击 [APP函数](http://http://ihavenolimitations.xyz/hongweizhiyuan/apicloud_function/268940) 这个链接就可以查看到！
```
//文章评论 20条
function user_comment(){
let object_id = api.pageParam.object_id;
let serverURL = Config.api.User_Article_Comment;
let data = {values:{post_id:object_id}};
let callback = function(ret){
if(ret.data.status == 1){
set_doT(ret.data.info, 'user_comment_script', 'user_comment_html',true);
}else{
set_doT(ret.data.info, 'user_comment_null_script', 'user_comment_html',true);
}
}
r_ajax(serverURL,data,callback);
}
```
### 第4步：在apiready中加入函数
代码如下：
```
apiready = function() {
user_comment(); //文章评论
};
```
## 定位列表的锚点？
```
<!--评论图标，点进去是列表-->
<div class="aui-bar-tab-item" id="userComment" tapmode style="width: 2.2rem;" >
<i class="aui-iconfont aui-icon-comment" onclick="ancho('comment_list');"></i>
</div>
```
相关函数：
```
//onclick锚点定位
function ancho(num) {
let url = window.location.href.substr(0, window.location.href.indexOf("#"));
window.location.href = url + '#' + num;
}
```
# 全部代码如下：
```
<!--评论列表/start-->
<div style="background:#f5f5f5;width:100%;line-height:2rem;padding-left:0.75rem;" name="comment_list" id="comment_list">评论</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list" style="margin-bottom:3.4rem;" id="user_comment_html">
</ul>
</div>
<!--评论列表/end-->
<!--评论图标，点进去是列表-->
<div class="aui-bar-tab-item" id="userComment" tapmode style="width: 2.2rem;" >
<i class="aui-iconfont aui-icon-comment" onclick="ancho('comment_list');"></i>
</div>
<script type="text/javascript" src="../../../script/assets/doT.min.js"></script>
<!--有评论-->
<script id="user_comment_script" type="text/x-dot-template" >
{{ for (var i = 0; i< it.length; i++){ }}
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="{{=it[i].avatar}}" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14">{{=it[i].full_name}}</div>
</div>
<div class="aui-ellipsis-2 aui-font-size-14" style="color:#999;">
{{=it[i].content}}
</div>
<div class="aui-info">
{{=it[i].createtime}}
</div>
</div>
</div>
</li>
{{ } }}
</script>
<!--暂无评论-->
<script id="user_comment_null_script" type="text/x-dot-template" >
<li class="aui-list-item">
<div class="aui-list-item-text">
暂无评论
</div>
</li>
</script>
<script>
apiready = function() {
user_comment(); //文章评论
};
//文章评论 20条
function user_comment(){
let object_id = api.pageParam.object_id;
let serverURL = Config.api.User_Article_Comment;
let data = {values:{post_id:object_id}};
let callback = function(ret){
if(ret.data.status == 1){
set_doT(ret.data.info, 'user_comment_script', 'user_comment_html',true);
}else{
set_doT(ret.data.info, 'user_comment_null_script', 'user_comment_html',true);
}
}
r_ajax(serverURL,data,callback);
}
//onclick锚点定位
function ancho(num) {
let url = window.location.href.substr(0, window.location.href.indexOf("#"));
window.location.href = url + '#' + num;
}
</script>
```
