主干.js/下划线.js错误:没有方法“html”

backbone.js / underscore.js error: has no method 'html'

本文关键字：js 有方法 html 下划线 错误 主干      更新时间：2023-09-26

当我尝试导入如下所示的模板时，我似乎遇到了一堵有骨干的砖墙.js/下划线.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();

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

.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);    
  }

不应该是

this.$el.html(template);

即 jQuery 包装的 el。

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

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

此外，从 render 方法返回 this 是一种 Backbone 约定，以便您可以轻松地呈现和附加元素，如下所示：

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

如果您愿意，可以在初始化器中render，但这不是标准做法。

尝试 

this.$el.html(template)

而不是 

this.el.html(template)
相关文章：