jquery 1.7.2 템플릿을 사용하여 목록보기를 동적으로 업데이트

Question

우선 jquery와 jquerymobile이 처음입니다. 질문이 어리석은 경우 미안합니다. 이전 프로젝트 (JQ 1.6.4 JQM 1.0b1로 작성)를 JQ 1.7.2 + JQM 1.1.0으로 이식하려고합니다. 템플릿 플러그인을 사용하여 JSON을 구문 분석하여 목록보기를 동적으로 업데이트하는 부분이 있습니다.

HTML 코드 :

... 
<ul data-role="listview" id="MyItems" data-inset="true"></ul> 
... 

템플릿 :

<script id="MyListItem" type="text/x-jquery-tmpl"> 
<li> 
    <div class="ui-li-almost-right"><button id="editButton">Edit</button></div> 
    <a href="javascript:true" id="connectLink">${symname}&nbsp;</a> 
</li> 
</script> 

목록 업데이트 : 새로운 버전으로

$(items).each(function (i, item) { 
    var myTemplate=$("#MyListItem").tmpl(item); 
    myTemplate.appendTo($("#MyItems")); 
}); 
$("#MyItems").listview("refresh"); 

은 JQ와 JQM 목록 항목은 "클래스 생성하는 경우 ui-page "로 표시되며 결과적으로 세로로 늘어납니다. 누군가 이런 일이 왜 일어나고 어떻게 피할 수 있는지 말해 줄 수 있습니까?

감사합니다.

Answer 1

당신은 차세대 jQuery를 템플릿을 사용할 수 있습니다 :와, JSRender을 :

이

템플릿 :

<script id="MyListItem" type="text/x-jquery-tmpl"> 
<li> 
    <div class="ui-li-almost-right"><button id="editButton">Edit</button></div> 
    <a href="javascript:true" id="connectLink">{{:symname}}&nbsp;</a> 
</li> 
</script> 

이 data.items하여 목록을 업데이트하려면 :

var dataList = $("#MyList"); 
// Create items using template & add to list 
dataList.append($("#MyListItem").render(data.items)); 
// Call listview jQuery UI Widget for correct rendering 
dataList.listview("refresh"); 

희망이 도움이 .