Backbone视图中的el未定义。

Question

我有这段代码 -

class TableManager 
  tables : {}
  tableViews :{}
  nextId : 0
  rootEl : 'body'
  addTable:(json,el)->
    newTableModel = new TableModel(json,@nextId)
    newTableModel
    @tables[@nextId] = newTableModel
    el = "#table1"
    newView = new TableView({model : newTableModel, columns : json["Columns"], el : el, id : @nextId})
    @tableViews[@nextId] = newView
    newTableModel.renderModel()
    @nextId++

class TableView extends Backbone.View
  tableId : ''
  columns : ''
  thead : ''
  tbody : ''
  input : ''
  rows : ''
  inputId : ''
  typingTimer : ''
  doneTypingInterval : 2000
  el : '#table1'
  initialize:()->
    @model.bind "render", @render 
    @tableId = "resultsTable#{@options.id}"
    @inputId = "filterInput#{@options.id}"
    @columns = @options.columns

  render:()=>
    console.log "EL"
    console.log $(@el)
    console.log @el

控制台中的console.log @el始终为undefined。我不知道为什么，我认为我正确地设置了this.el？是因为渲染是作为事件触发的结果而被调用吗？

- praks5432

Answer 1

当您实例化 TableView 时，DOM 中不存在 id="table1" 元素。例如，如果您在没有任何内容的 DOM 中执行此操作：

class V extends Backbone.View
    el: '#no-such-element'
    render: => console.log @el

v = new V
v.render()

如果控制台出现undefined，你需要检查一下代码。

示例：http://jsfiddle.net/ambiguous/ne39B/

如果你想让Backbone创建一个带有 id="table1" 的元素，则需要使用不同的属性来告诉Backbone这样做； View#el 文档 指出：

this.el是从视图的 tagName、 className、id 和 attributes 属性创建的。

因此，你有几个选项：

1. 确保在创建视图时，#table1 已经存在于DOM中。
2. 在实例化视图时将 el 传递给视图：v = new TableView(el: some_dom_object)。
3. 使用tagName、className、id和attributes视图属性来构建适当的DOM元素。

此外，即使Backbone构建了视图的 el，它也不会自动将视图的 el 添加到DOM中，你必须手动将其添加到DOM中。

- mu is too short

---

所以我调用新的tablemanager并让它在我追加一个具有id为#table1的div的handlebars模板之后添加一个表。 - praks5432

我建议采用第三种方法。这样，调用者可以在他们想要的地方和时间将newView.el添加到DOM中。方法3也让清理变得非常容易，只需调用newView.remove()一切都应该消失（当然，你需要在视图的remove方法中添加解绑定调用）。 - mu is too short

你实际上如何做到3？只需提供这些元素吗？ - praks5432

在视图中设置属性，当调用render时，您将拥有您的el：http://jsfiddle.net/ambiguous/tPY4V/1/ - mu is too short