2013-02-12 5 views
11

Sto cercando di sviluppare una semplice applicazione RSS utilizzando backbone.js. Sto usando questo backbone.js tutorial. Ricevo il seguente errore, nella riga 2 (modello), durante la definizione del modello. Qualcuno può dirmi anche perché è tagName: "li" definito nel tutorial?Uncaught TypeError: impossibile chiamare il metodo 'replace' di backbone.js non definito

uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

javscript

window.SourceListView = Backbone.View.extend({ 
    tagName:"li", 
    template: _.template($('#tmpl_sourcelist').html()), 

    initialize:function() { 
     this.model.bind("change", this.render, this); 
     this.model.bind("destroy", this.close, this); 
    }, 

    render:function (eventName) { 
     $(this.$el).html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    close:function() { 
     $(this.el).unbind(); 
     $(this.el).remove(); 
    } 
}); 

HTML

<script type="text/template" id="tmpl_sourcelist"> 
         <div id="source"> 
         <a href='#Source/<%=id%>'<%=name%></a> 
         </div> 
       </script> 

grazie

+0

provare a eseguire il modello senza i dati e vedere ciò che si ottiene ... questo. $ El.html (this.template()) – beNerd

+0

Errore a line2 (modello: _.template ($ ('# tmpl_sourcelist')) .html()),). Non sei sicuro di cosa stai raccomandando. – jsp

risposta

44

Stai diventando il vostro errore proprio qui:

template: _.template($('#tmpl_sourcelist').html()), 

Parte di interni _.template s' comporta chiamando String#replace sul testo del modello non compilato sulla strada per produrre la funzione di modello compilato. Tale errore particolare di solito significa che si sta effettivamente dicendo questo:

_.template(undefined) 

che può accadere se non c'è #tmpl_sourcelist nel DOM quando si dice $('#tmpl_sourcelist').html().

ci sono alcune soluzioni semplici:

  1. regolare il vostro ordine <script> in modo che la vostra #tmpl_sourcelist viene prima si tenta di caricare il vostro punto di vista.
  2. creare la funzione di modello compilato nel vostro punto di vista di initialize invece che nella definizione di "classe" della vista:

    window.SourceListView = Backbone.View.extend({ 
        tagName:"li", 
        initialize:function() { 
         this.template = _.template($('#tmpl_sourcelist').html()); 
         //... 
    

Per quanto riguarda tagName va, il fine manual ha questo da dire:

elview.el

[...] this.el is created from the view's tagName , className , id and attributes properties, if specified. If not, el is an empty div .

Così avendo questo nella tua vista:

tagName: 'li' 

significa che Backbone creerà automaticamente un nuovo elemento <li> come vista el.

+0

ottima risposta! Mi ha aiutato nella mia situazione perché \t $ ("target #"). Html (_. Template (template, [posts])); cercavo un id = target ma era una classe. – Anthony

+0

@ Anthony: Grazie. Quindi lo stesso problema '_.template (indefinito)' in travestimento. –