UnderscoreJS Uncaught TypeError: विधि कॉल नहीं कर सकता अपरिभाषित

Question

की 'की जगह ले' मेरी रीढ़ ध्यान में रखते हुए मैं:

noteTemplate: _.template($('#note-template').html()),

कौन इस त्रुटि फेंक रहा है। टेम्पलेट है:

<script type="text/template" id="note-template"> 
    <div class="reminder"> 
     <div class="reminder-hover"> 
      <div class="title"><%= title %></div> 
      <div class="created">Created 3 days ago <span class="pull-right"> In 3 hours</span></div> 
     </div> 
     <span class="id" style="display: none;"><%= id %></span> 
    </div> 
</script> 

मैं उलझन में हूँ क्योंकि यह मेरे कंसोल में काम करता है:

App.Views.Index = Backbone.View.extend({ 

    el: $("div.reminders"), 
    todays : $("span.today"), 
    tomorrows : $("span.tomorrow"), 
    weeks : $("span.week"), 
    all_times : $("span.all-time"), 

    noteTemplate: _.template($('#note-template').html()), 


    events: { 
     "click .reminder" : "editNote", 
     "click .newNote" : "newNote" 
    }, 

    initialize : function() { 
     _.bindAll(this, 'render'); 
     this.notes = this.options.notes; 
     this.listenTo(this.model, 'change', this.render); 
    }, 

    render : function() { 
     // Hide things related to editing a note 
     this.$("[name=content]").hide().val(""); 
     this.$("[name=title]").hide().val(""); 
     this.$("save1").hide(); 
     this.$("close1").hide(); 

     // Fill in content 
     this.$el.html(this.noteTemplate(this.model.toJSON())); 
     this.$todays.html(collection.getTodays.length); 
     this.$tomorrows.html(collection.getTomorrows.length); 
     this.$weeks.html(collection.getWeeks.length); 
     this.$all_times.html(collection.getAllTimes.length); 
     return this; 
    }, 

    editNote : function() { 
     this.goTo("notes/"+this.model.id); 
    }, 

    newNote : function(){ 
     this.goTo("newNote"); 
    } 

}); 

Answer 1

के बजाय कोशिश कर:

>> _.template($('#note-template').html());
function (n){return e.call(this,n,w)}

यहाँ पूर्ण कोड है जब आप विधि को परिभाषित करते हैं तो नोट टेम्पलेट HTML को कैश करने के लिए, जब आप दृश्य को प्रारंभ करते हैं तो इसे करें।

initialize : function() { 
    // ... 
    this.nodeTemplate = _.template($('#note-template').html()); 
} 

यह अत्यधिक संभावना है कि आप डीओएम (और इस प्रकार टेम्पलेट) लोड होने से पहले दृश्य को परिभाषित कर रहे हैं।

Answer 2

एक अन्य समाधान (मैं जेड उपयोग कर रहा हूँ)

script#page-thumb(type='text/template') 
    .page-thumb-container.relative 
     .page-thumb 
     .image 
      figure 
      img(src='{{ image }}' , width='80px',height='60px' , data-id='{{ id }}') 
      span.title {{ title }} 
     .page-dragger.absolute 

script(src='js/src/views/PageThumbView.js')