jquery template 模板循环 function作用域传值传参

data数据包含：answer和question，question是只有一个，answer有多个并支持滚动翻页；answer里的数据类型字段分别为 10-视频、20-音频、30-图片，并且都要支持预览。

数据处理原理：总数据为data，data里有answer和question，question只有一个，answer有多个，所以question 是不需要循环的，直接d.question.名字就可以了，answer是个数组，就需要循环d.answer；

---

---

data数据获取

var para = {
	page: 1,
	questionid: obj.data.questionid // 这是表格的相关操作字段
}
adminquestionQuestiondetail(para).then(function(res) {
	if(res.code == 1) {
		questiondetail = res.data; // 这个为数据 
		
		//问题模板的引用
		var questiontpl = $("#questiontpl").html();
		laytpl(questiontpl).render(questiondetail, function(html) {
			$("#lookDialoge").append(html);
		});
		
		//滚动加载时加载回答的模板
		flowAnswerlist(obj.data.questionid);//渲染回答滚动数据
	} 
})

这个地方的传参questionid ：原本点击查看按钮就知道questionid，但要传到flowAnswerlist()这里去。所以在引用时要传
flowAnswerlist(obj.data.questionid);//渲染回答滚动数据

//滚动加载时加载回答的模板
function flowAnswerlist(questionid){
	flow.load({
		elem: '#lookDialoge' //流加载容器
		,scrollElem: '#lookDialoge'//滚动条所在元素，一般不用填，此处只是演示需要。
		,done: function(page, next){ //执行下一页的回调
			adminquestionQuestiondetail({
				page: page,
				questionid: questionid
			}).then(res => {
				var lis = [];
				answerdetail = res.data.answer;
				var answertpl = $("#answertpl").html();
				laytpl(answertpl).render(answerdetail, function(html) {
					lis.push(html);
				});
				var totalpage = Math.ceil(res.total/10);
				next(lis.join(''),page < totalpage);
			})
		}
	});
}

静态html

上面是问题和回答，问题只有一个但回答可以多个

---

第一版模板循环如下

<script id="answertpl" type="text/html">
	<!-- question模板 -->
	<div class="lookDialogebg">
		<div class="userinfo">
			<div><img src="'{{d.question.useravatar}}"/></div>
			<div class="names">{{d.question.username}}</div>
			<div class="datetimes">{{(d.question.createtime).substring(5,16)}}</div>
		</div>
		<div class="userques">{{d.question.description}}</div>
		<div class="userimg">{{d.question.images}}</div>
	</div>
	
	<!-- answer模板 -->
	{{# layui.each(d.answer, function(idx, items){ }}
		<div class="lookDialogebg">
			<div class="userinfo">
				<div><img src="'{{items.useravatar}}"/></div>
				<div class="names">{{items.username}}</div>
				<div class="marks">答</div>
				<div class="datetimes">{{(items.updatetime).substring(5,16)}}</div>
			</div>
			<div class="userques">{{items.description}}</div>
			<div class="userimg" id="imgviews">
				{{# layui.each(items.data, function(idx1, items1){ }}
				<img src="{{items1.url}}" data-role="imgviews"/>
				{{# }); }}
			</div>
		</div>
	{{# }); }}
</script>

---

后面考虑到需求是 显示问题加多个答案，当滚动加载时，只加载回答的内容，所以需要将问题和回答分别放两个模板里调用，如下，数据还是那个数据

第二版：问题模板

这个仍然不需要循环，直接展示就好

<!-- question模板 -->
<script id="questiontpl" type="text/html">
	<div class="lookDialogebg">
		<div class="userinfo">
			<div><img src="'{{d.question.useravatar}}"/></div>
			<div class="names">{{d.question.username}}</div>
			<div class="datetimes">{{(d.question.createtime).substring(5,16)}}</div>
		</div>
		<div class="userques">{{d.question.description}}</div>
		<div class="userimg">
			{{# layui.each(d.question.images, function(idx0, items0){ }}
			<img src="{{items0.url}}" width="68px" height="68px" data-role="imgviews0"/>
			{{# }); }}
		</div>
	</div>
</script>

第二版回答模板

<!-- answern模板 -->
<script id="answertpl" type="text/html">
	{{# layui.each(d, function(idx, items){ }}
		<div class="lookDialogebg">
			<div class="userinfo">
				<div><img src="'{{items.useravatar}}"/></div>
				<div class="names">{{items.username}}</div>
				{{# if(items.type == '10'){ }}
				<div class="marks">答</div>
				{{# }else{ }}
				<div class="marks">问</div>
				{{# } }} 
				<div class="datetimes">{{(items.updatetime).substring(5,16)}}</div>
			</div>
			<div class="userques">{{items.description}}</div>
			<div class="userimg">
				{{# layui.each(items.data, function(idx1, items1){ }}
					{{# if(items1.itemtype == '10'){ }}
					<div class="videoviews">
						<video src="{{items1.url}}" width="68px" height="68px" data-role="videoviews"></video>
					</div>
					{{# }else if(items1.itemtype == '20'){ }}
					<div class="audioviews" data-role="{{items1.url}}" style="width:68px;height:68px;"></div>
					{{# }else{ }}
					<div><img src="{{items1.url}}" width="68px" height="68px" data-role="imgviews"/></div>
					{{# } }} 
				{{# }); }}
			</div>
		</div>
	{{# }); }}
</script>