uncaught TypeError：未定義のbackbone.jsのメソッド 'replace'を呼び出すことができません

Question

backbone.jsを使用して簡単なRSSアプリケーションを開発しようとしています。私はこのバックボーンを使用しています.js tutorial。私は、テンプレートを定義するときに2行目（テンプレート）に次のエラーが表示されます。 tagName： "li"がチュートリアルで定義されている理由を教えてもらえますか？

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> 

おかげであなたは右ここにあなたのエラーを取得している

Answer 1

：

の内部の

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

一部は、コンパイル済みのテンプレート関数を生成することに途中でコンパイルされていないテンプレートテキストにString#replaceを呼び出す必要とします。その特定のエラーは、通常、あなたがこれを効果的に言っていることを意味します。あなたは$('#tmpl_sourcelist').html()を言うときDOMには#tmpl_sourcelistが存在しない場合に発生することができます

_.template(undefined) 

。

は、いくつかの簡単な解決策があります：あなたはあなたのビューをロードしようとする前に、あなたの#tmpl_sourcelistが来るように

1. がご<script>順序を調整します。

2. ビューのinitializeの代わりに、ビューの「クラス」の定義内にコンパイルされたテンプレート関数を作成します。

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

を限りtagNameが行くように、fine manualが言うにこれを持っている：

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 .

このように表示すると、

tagName: 'li' 

は、ビューのelとして、新しい<li>要素を自動的に作成することを意味します。