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 은 도대체 어디에 쓰는 물건일까?


comments powered by Disqus