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對象使用這個。$ 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屬性，並將視圖元素附加到頁面中的任何位置。

此外，它是一個Backbone約定，從render方法返回this ，因此您可以輕松地渲染和附加元素，如下所示：

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

如果您願意，可以在初始化器中進行render ，但這不是標准練習。

Answer 4

嘗試

this.$el.html(template) 

代替

this.el.html(template)