未定义主干视图

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 始终未定义。我不知道为什么，我认为 this.el 设置正确？是不是因为事件触发而调用了渲染？

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 documentation 状态：

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

所以你有一些选择：

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

此外，Backbone 不会为您将视图的 el 添加到 DOM，即使 Backbone 构建视图的 el 您必须自己将其添加到 DOM。