4

当我尝试导入如下所示的模板时,我似乎遇到了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(); 

我不确定是什么原因造成的,但它一直让我发疯。

4

4 回答 4

7

.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);    
  }
于 2012-05-26T13:34:31.240 回答
4

那不应该

this.$el.html(template);

IE。jQuery 包装的 el。

于 2012-05-26T13:12:33.470 回答
2

您正在尝试将视图连接到现有元素,#overview_container. 但可以肯定的是,在浏览器初始化 DOM 之前就创建了视图类。

由于您的模板存储在#overview_container,大概您不希望在该元素中呈现视图?尝试删除el视图上的属性并将视图的元素附加到页面中您想要的任何位置。

this此外,从该方法返回是一个 Backbone 约定,render因此您可以轻松地渲染和附加元素,如下所示:

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

如果您愿意,可以render在初始化程序中使用,但这不是标准做法。

于 2012-05-26T10:11:43.817 回答
0

尝试

this.$el.html(template) 

代替

this.el.html(template)
于 2013-11-28T09:32:28.440 回答