0 
<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>

しかし、これから来るのは（firebugを見ながら）

<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>

動作の理由は何ですか?

4

1 に答える 1

0

テンプレートを 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);
    });

});

デモとコード

于 2013-05-25T20:57:54.003 に答える