バックボーンコレクションをバインディングしてフロントエンドのテンプレートを表示およびアンダースコア

Question

私はバックボーン+ jqueryモバイルを使用しており、モデル（コレクション）の配列をアンダースコアテンプレートを使用してUIに出力することができませんでした。

次のように私のモデルは次のとおりです。

var shortcakes = Backbone.Collection.extend ({ 
    model: shortcake 
}); 

var shortcake1 = new shortcake({ name: "How Bizarre", butter: "true", time: "1", icon:"plus", deladd:"ADD" }); 
var shortcake2 = new shortcake({ name: "Sexual Healing", butter: "true", time: "1", icon:"plus", deladd:"ADD" }); 
var shortcakeAlbum = new shortcakes([ shortcake1, shortcake2]); 

そして、私のビュー：

var shortcakeUI = Backbone.View.extend ({ 

    tagName: "li", 
    template: _.template($('#shortcakeTemplate').html()), 


    initialize: function(){ 
    this.render(); 
    }, 

    render: function() { 
     var variables = { namee: name }; 
      if (this.model.butter == false) { 
      this.model.deladd = "ADD"; 
      this.model.icon= "plus"; 
      this.el.html(template); 
      } 
      else { 
       this.model.deladd = "DELETE"; 
      this.model.icon= "minus"; 
      this.el.html(template); 
      } 
     }, 

)}; 


var ShortcakeUI = new shortcakeUI({ 
collection : shortcakeAlbum, 
el: $("#shortcakeinterface")[0] 
}); 
ShortcakeUI.render(); 

そして、私のHTMLは次のとおりです。次のように

var shortcake = Backbone.Model.extend({ 

    defaults: function() { 
     return { 
     name: "No Slot", 
     butter: false, 
     time: "3pm", 
     icon: "plus", 
     deladd: "ADD" 
     }; 
    }, 

    initialize: function() { 
     this.bind("change:butter", function(){ 
     if (this.model.butter == false) { 
     this.set({name: this.defaults.name}); 
     }; 
     }), 
    } 
}); 

私のコレクションです

<ul data-role="listview" data-split-icon="gear" data-split-theme="d"> 
     <div id="shortcakeinterface"></div> 
    </ul> 
<!---Templates---> 
      <script id="shortcakeTemplate" type="text/template"> 
     <% for(var i = 0; i < shortcakeAlbum.length; i++){ %> 
     <% var shortcakez = shortcakeAlbum[i]; %> 

      <fieldset class="ui-grid-a"> 
       <div class="ui-block-a"> 

        <h3><%= shortcakez.time %></h3> 
        <p><%= shortcakez.name %></p>  

       </div> 

       <div class="ui-block-b"> 

        <div id="8" data-role="controlgroup" data-type="horizontal" > 
         <a href="#" data-role="button" data-icon="<%= shortcakez.icon %>"><%= shortcakez.deladd %></a> 
         <a href="#" data-role="button" data-icon="plus">Test</a> 
        </div> 

       </div>  
      </fieldset> 
     <% } %> 
     </script> 

これで、私のUIは読み込み中のモデルのリストを表示しません。 バックボーンとjsをちょうど始めると、私はここで何かしていますか？

Answer 1

render（）でテンプレートにモデルを渡す必要があります。代わりに

this.el.html(template); 

の

が行うこの

$(this.el).html(this.template(this.model.toJSON()));