javascript - Backbone.js View ，dom 访问不起作用

Question

我们正在使用 Django 框架开发一个网络应用程序，我们正在使用 Backbone.js 进行 MV 分解。我们有一个 View 并在其上调用渲染，它用新内容换出一个 div#main，如下所示:

var GoalListView = Backbone.View.extend({
el: $('#main'),

template: _.template($("#swap").html()),

render: function() {
  $(this.el).html(this.template());
  return this;
}

});

这按我们预期的方式工作(使用模板的内容更改页面)，但是在我们创建的下一个 View 中，我们无法访问任何这些新的 DOM 元素。

 el: $('#newId') 

给我们未定义，即使我们在交换的模板中有一个 id 为 newId 的元素。模板交换已经在此时发生，那么为什么我们无法访问新元素？

编辑:谢谢，我同意这是一个时间问题。但是对于事件呢？

events: {
    'keypress #goal-entry': 'createOnEnter'
 },

然后没有选项可以在 DOM 中搜索要附加事件的元素，对吧？

Answer 1

如果要将 $('#newId') 分配给 el，则必须确保它已经在 DOM 中。在我们的例子中，如果你插入用于第二个 View 的元素，你最初不需要定义它但必须将它传递给 initialize():

var SomeView = Backbone.View.extend({
  // do NOT define el or $el or id here
  initialize: function($el) {
    this.$el = $el;
    ... go on do more things...
  }
});

然后在应用程序中您需要的任何位置初始化第二个 View :

var someView = new SomeView($('#someID'));