제이쿼리 html 템플릿
ajax 로 html 을 뿌리기위해 이렇게 사용했었다.
$.ajax({
type : 'GET',
url : 'http://....',
dataType : 'json',
data : paramData,
error: function(request,status,error){
console.log(request +status+ " : " +error);
},
success : function(result){
var list = "<div>이름</div>" +
"<div>result.name</div>" +
"<div>나이</div>" +
"<div>result.age</div>" ;
$(".list").html(list);
},
});
이렇게 사용하면 html 태그 바깥쪽에 따옴표를 넣어줘야하고
줄이 많아지면 유지보수가 불편해진다.
그래서 jquery html 템플릿을 사용해보았다.
템플릿 js다운로드 주소 :
https://github.com/jquery/jquery-tmpl
다운받고 압출풀고 프로젝트 js경로에 해당파일을 추가해준다.
<script type="text/javascript" src="/static/js/jquery.tmpl.js"></script>
헤더에 스크립트 주소 추가
<script type="text/javascript">
$.ajax({
type : 'GET',
url : 'http://...',
dataType : 'json',
data : paramData,
error: function(request,status,error){
console.log(request +status+ " : " +error);
},
success : function(result){
for(var i=0 ; i < result.length ; i++){
var profileImg = staticDomain + result[i].owner.profileImage;
var imgCheck = result[i].owner.profileImage;
var viewImg = staticDomain + result[i].thumbPath;
var data={
livecnt :{"livecnt" : result[i].livecnt},
viewImg :{"viewImg" : staticDomain + result[i].thumbPath},
member :{"memberName" : result[i].owner.memberName},
profileImg :{"profileImg" : profileImg},
category :{"category" : result[i].categoryName},
tag :{"tag" : result[i].tags},
roomId:{"roomId" : result[i].roomId},
chatId:{"id" : result[i].id}
};
//#list : 스크립트 아이디
//.tmpl(data) : 선언된 데이타를 템플릿을 이용해 넣어준다
//.
appendTo("#bcListWrap") : body 안에 div. #list를 #bcListWrap에 넣어준다
$("#list").tmpl(data).appendTo("#bcListWrap");
}
},
});
</script>
JSTL을 사용중이라 그런지 ${aa} 가 안먹혔다.
\${aa} 하니까 먹힌다.
그리고 #list 안에있는 div의 클래스를 활용해 jquery로 속성을 변경하려하는데 안먹힌다
$(".img).attr("src","./img/aa.jpg") 이런게 안먹는다 이건 좀 불편하다.
<script
id="list" type="text/html">
<div class="bcListBox" onClick="goChatRoom('\${chatId.id}','\${roomId.roomId}')" id="\${chatId.id}">
<div class="bcBoxCont bcStatusWrap">
<div class="bcPopul">
<div class="bcStatus">
<img class="img" src="/static/images/list/img_broadcast_live.png" alt="">
</div>
<img src="/static/images/list/ic_broadcast_viewer.png" alt="" class="ic_broadcast_viewer">
<span>\${livecnt.livecnt}</span>
</div>
</div>
<div class="bcBoxCont bcImg">
<img src="\${viewImg.viewImg}">
</div>
<div class="bcCasterWrap">
<div class="bcBoxCont bcProImg">
<img src="\${profileImg.profileImg}" alt="" id="bjProfileImg">
</div>
<div class="bcBoxCont bcName">\${member.memberName}</div>
</div>
<div class="bcTextWrap">
{{if tag.tag == ""}}
<div class="bcBoxCont bcTextCate">\${category.category} </div>
{{else}}
<div class="bcBoxCont bcTextCate">\${category.category} |</div>
{{/if}}
<div class="bcBoxCont bcText"> \${tag.tag}</div>
</div>
</div>
</script>
<body>
<div
id="bcListWrap">
</div>
</body>
