2010-11-11
Modify Rendered jQuery Template Before Append
jQuery 템플릿이 하나의 DIV 가 아니라 여러 개의 엘리먼트로 구성될 경우, append 하기 전에 내부에 있는 위젯들을 손댈 방법을 찾지 못했다. 아래 코드의 샘플은 jsFiddle에 있으니 관심있는 분들은 뜯어보시길..
<script id="test" type="script/x-jquery-tmpl">
<div>
<h1>${name}</h1>
<p>${description}</p>
<div class="progressbar"></div>
</div>
</script>
<script id="test2" type="script/x-jquery-tmpl">
<h1>${name}</h1>
<p>${description}</p>
<div class="progressbar"></div>
</script>
<div id="here"></div>
$(function() {
var data = {name: 'Hello', description: 'World', value:50};
var data2 = {name: 'JavaScript' ,description: 'Rules', value: 80};
var $tmpl = $('#test').tmpl(data);
$tmpl.find('.progressbar').progressbar({value:data.value});
$tmpl.appendTo('#here');
var tmpl2 = $('#test2').tmpl(data2);
tmpl2.find('.progressbar').progressbar({value:data2.value}); // not working
tmpl2.appendTo('#here');
});
위 예제처럼, #test 는 하나의 DIV 로 묶여져 있어서 appendTo 하기 전에 위젯을 만들 수 있지만, #test2 처럼 여러 개의 엘리먼트들이 나눠져 있는 경우에는 .tmpl(data) 로 렌더링을 하면 [h1, p, div.progressbar] 의 배열이 튀어나오는데, 이 배열에다가 대고 find 를 해도 아무 일도 발생하지 않는다. (for 를 돌아도 마찬가지)
일단은 그냥 마음편하게 하나로 묶는게 유일한 해답일 거 같은데, 그나저나 .tmplItem 은 도대체 어디에 쓰는 물건일까?