Ich kann eine Backbone.js Ansicht nicht ausfüllen

Question

Ich habe Probleme mit dem Auffüllen einer Ansicht aus einer Backbone.js-Sammlung.

Hier ist meine Ansicht:

<script type="text/template" id="item-template">    
       <div style="float:left;min-height: 200px;min-width: 50%;"> 
        <div style="float:left;"> 
         <h4>Totals for the day: <%- logdate %></h4> 

         <p><strong>Total Calories:</strong> <span><%- calories %></span></p> 
         <p><strong>Total Protein:</strong> <span><%- protein %></span></p> 
         <p><strong>Total Carbohydrates:</strong> <span><%- carbs %></span></p> 
         <p><strong>Total Fat:</strong> <span><%- fat %></span></p> 
         <p><strong>Total Sugar:</strong> <span><%- sugar %></span></p> 

        </div> 
        <div style="float:right;min-height: 200px;min-width: 50%;"> 

        </div> 
        <div style="width: 100%;clear: both;"> 
         <hr> 
        </div>     
       </div>    
       </script> 

Hier Schnipsel meines js Code sind:

//the model and collection 
var LogEntry = Backbone.Model.extend({ 
    defaults: { 
     title: 0, 
     logdate: '', 
     calories: 0, 
     fat: 0, 
     carbs: 0, 
     protein: 0, 
     sugar: 0, 
     content: {} 
    }, 
    initialize: function() { 
     /*if (!this.get("title")) { 
     this.set({"title": this.defaults().title}); 
     }*/ 
    } 
}); 

var FoodJournalCollection = Backbone.Collection.extend({ 
    model: LogEntry, 
    localStorage: new Backbone.LocalStorage("foodjournal") 
}); 

//setting the body, template, collection variables 
el: 'body',  
template: _.template($('#item-template').html()) 
this.journalCollection = new FoodJournalCollection(); 

//I'm trying to retrieve the the collection and populate the view 
this.journalCollection.fetch(); 
this.$el.html(this.template(this.journalCollection.toJSON())); 

Dies ist der Fehler, ich bin immer: Reference: LogDate nicht

definiert ist

Answer 1

this.journalCollection.toJSON() wird in ein Array von Modellen aufgelöst.

Sie sollten stattdessen tun dies sein:

this.$el.html(this.template({ 
    models: this.journalCollection.toJSON() 
})); 

und dann in der Vorlage:

<script type="text/template" id="item-template"> 
    <% for(var model in models){ %> 
     // All your HTML ... <%- models[model].calories %> ... etc 
    <% } %> 
</script> 

, die alle Modellinformationen auszudrucken wird die Vorlage mit Ihnen definiert.