uncaught TypeError: Nie można wywołać metody 'replace' niezdefiniowanego backbone.js

Question

Próbuję opracować prostą aplikację RSS za pomocą pliku backbone.js. Używam tego backbone.js tutorial. Otrzymuję następujący błąd, na linii 2 (szablon), podczas definiowania szablonu. Czy ktoś może mi również powiedzieć, dlaczego tagName: "li" zostało zdefiniowane w samouczku?

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> 

dzięki

Answer 1

Dostaniesz swój błąd tu:

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

Część wewnętrznych _.template „s polega powołanie String#replace na nieskompilowanego szablonu tekst na drodze do wytwarzania skompilowany funkcji szablonu. Ten szczególny błąd zwykle oznacza, że ​​jesteś skutecznie mówiąc to:

_.template(undefined) 

że może się zdarzyć, jeśli nie ma #tmpl_sourcelist w DOM kiedy mówisz $('#tmpl_sourcelist').html().

Istnieje kilka prostych rozwiązań:

1. Dostosuj swoje zamówienie <script> żeby #tmpl_sourcelist przychodzi zanim spróbujesz załadować swój pogląd.

2. Tworzenie skompilowany funkcji szablonu w widoku na initialize zamiast w „klasy” definicji widoku za:

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

miarę tagName Goes, fine manual ma do powiedzenia:

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 .

Więc mając to na widoku:

tagName: 'li' 

oznacza, że ​​Szkielet automatycznie utworzy nowy element <li> jako widok el widoku.