javascript - backbone.js / underscore.jsエラー：メソッド'html'がありません

Question

次のようなテンプレートをインポートしようとすると、backbone.js/underscore.jsでレンガの壁にぶつかっているようです。

<script type="text/template" id="overview_template">
<div>
  Sample text
</div>
</script>

エラーは次のとおりです。

Uncaught TypeError: Object #<HTMLDivElement> has no method 'html' navigation.js:356 
Backbone.View.extend.render navigation.js:356 
Backbone.View.extend.initialize navigation.js:351 
g.View backbone-min.js:33 d backbone-min.js:38 
(anonymous function) navigation.js:379 
f.Callbacks.n jquery-1.7.1.min.js:2 
f.Callbacks.o.fireWith jquery-1.7.1.min.js:2 
e.extend.ready jquery-1.7.1.min.js:2 c.addEventListener.B

エラーをトリガーするコードthis.el.html(template);は次のとおりです。

 var OverviewView = Backbone.View.extend({
  el: $('#overview_container'),

  initialize: function() {
       this.render();
  },

  render: function() {
    var template = _.template( $("#overview_template").html(), {} );
    this.el.html(template);
  },

  defaults: {
    tip_of_the_day: 'open',
    news: 'open',
    recent_presentations: 'open'
  },

  events: {
    "click .overview_subsection_header": "toggleSubsection"     
  },

  toggleSubsection: function (event) {
    $(this).parent().find('.overview_subsection_content').toggle();
  }
 });

 var overview_view = new OverviewView(); 

何が原因なのかはわかりませんが、それが私を狂わせています。

Answer 1

.html() メソッドは jQuery オブジェクトのメソッドです。this.el を使用すると、DOM オブジェクトになります。jQuery オブジェクトを取得するには、this.$el (backbone.js jQuery オブジェクトによってキャッシュされます) または $(this.el) を使用します。

したがって、コードは次のようになります。

  render: function() {
    var template = _.template( $("#overview_template").html(), {} );
    this.$el.html(template);    
  }

また

  render: function() {
    var template = _.template( $("#overview_template").html(), {} );
    $(this.el).html(template);    
  }

Answer 2

そうであってはならない

this.$el.html(template);

すなわち。jQuery でラップされた el。

Answer 3

ビューを既存の要素に接続しようとしています#overview_container。ただし、ブラウザがDOMを初期化する前に、ビュークラスが作成されていることは確かです。

テンプレートはに保存されているので#overview_container、おそらくその要素でビューをレンダリングしたくないですか？ビューのプロパティを削除elし、ページ内の任意の場所にビューの要素をアタッチしてみてください。

thisまた、メソッドから戻るのはバックボーンの規則でrenderあるため、次のように要素を簡単にレンダリングしてアタッチできます。

$(document.body).append((new OverviewView()).render().el);

必要に応じてイニシャライザーを使用できrenderますが、これは標準的な方法ではありません。

Answer 4

試す

this.$el.html(template) 

それ以外の

this.el.html(template)