Jquery 템플릿이 생성되어 태그 외부에 오는 HTML

Question

<ul class="messagesList ifClicked"> 
      <script id="questionsTemplate" type="text/x-jquery-tmpl"> 
        <li> 
         <span class="from">${source} </span> 
        </li> 
      </script> 
</ul> 

위의 jquery 템플릿 코드가 있습니다. 내게로 예상 출력은

<ul class="messagesList ifClicked"> 
        <li> 
         <span class="from">Reuters</span> 
        </li>     
        <li> 
         <span class="from">CNN</span> 
        </li> 
        <li> 
         <span class="from">CNN</span> 
        </li> 
</ul> 

비슷하지만

<ul class="messagesList ifClicked"> 
      <script id="questionsTemplate" type="text/x-jquery-tmpl"> 
        <li> 
         <span class="from">${source} </span> 
        </li> 
      </script> 
</ul> 
         <li> 
          <span class="from">Reuters</span> 
         </li>     
         <li> 
          <span class="from">CNN</span> 
         </li> 
         <li> 
          <span class="from">CNN</span> 
         </li> 

는 행동에 대한 이유 무엇입니까 (개똥 벌레에서 찾고있는 동안) 무엇을 오는 것은?

Answer 1

템플릿을 ul 목록 외부로 옮깁니다. 그렇게하면 재설정하려는 경우 목록을 비울 수 있습니다.

HTML :

<script id="questionsTemplate" type="text/x-jquery-tmpl"> 
     <span class="from">${source} </span> 
</script> 

<ul class="messagesList ifClicked"> 

</ul> 

JS :

$(document).ready(function(){ 

    var list = [ 'Routers', 'CNN', 'CNN' ]; 

    var tmpl = ''; 
    $.each(list, function(num, el) { 
     tmpl = $('<li>').html($('#questionsTemplate').html()); 
     tmpl.find('.from').html(el); 
     $('.messagesList').append(tmpl); 
    }); 

}); 

DEMO and CODE