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

Jquery模板生成的HTML出现在标记之外

1 个答案: