Question

我有一个Backbone.js应用程序，我正在尝试与Backgrid集成，但我无法理解我应该在哪里调用new Backgrid。在渲染完东西之后我尝试在我的视图中调用它但是附加网格不起作用，因为事实上还没有实际渲染。这是一些代码：

SpreadsheetIndex.js.coffee

D3.Views.SpreadsheetsIndex = Support.CompositeView.extend
  initialize: (options) ->
    this.tables = options.tables
    this.resources = options.resources
    _.bindAll(this, 'render')

  render: ->
    this.renderTemplate()
    this.renderSpreadsheets()

    resources = this.resources

    this.tables.each (table) ->

      subset = resources.subcollection
        filter: (resource) -> 
          resource.escape('table_id') == table.escape('id')

      grid = new Backgrid.Grid
        columns: table.attributes.columns
        collection: subset

      $("#"+table.escape('id')).append(grid.render().$el);
    return this

  renderTemplate: ->
    this.$el.html(JST['spreadsheets/index']({ spreadsheets: this.tables }))

  renderSpreadsheets: ->
    self = this
    self.$('tbody').empty();

电子表格/ index.jst.ejs

<% spreadsheets.each(function(spreadsheet) { %>
  <h4><%= spreadsheet.escape('name')%></h4>
  <div id='<%= spreadsheet.escape('id') %>'></div>
<% }) %>

问题是$("#"+table.escape('id'))选择器没有选择任何内容，因为模板尚未呈现。感觉就像我把它放在错误的地方。我做错了什么？

Answer 1

我猜您要使用视图的@$方法代替$将选择器本地化为视图的el：

this.tables.each (table) =>
  #...
  @$("#"+table.escape('id')).append(grid.render().$el);

请注意，->已变为=>（以获得正确的@ / this），现在使用@$代替$

当我在这里时，您可以做其他一些事情来使您的代码更具思想性：

说出class D3.Views.SpreadsheetsIndex extends Support.CompositeView而不是JavaScripty D3.Views.SpreadsheetsIndex = Support.CompositeView.extend。
使用@代替this，例如@tables = options.table而不是this.tables = options.table。
如果您觉得它更干净，可以使用字符串插值而不是+：
```
@$("##{table.escape('id')}")
```
您很少需要bindAll，而不是_.bindAll(this, 'render')，您可以将render定义为render: =>，以使绑定自动发生。
您很少需要CoffeeScript中的var self = this技巧，您通常可以使用=>。你在这里不需要任何一个：
```
renderSpreadsheets: ->
  self = this
  self.$('tbody').empty();
```
你可以renderSpreadsheets: -> @$('tbody').empty()

我在哪里初始化Backbone / Rails应用程序中的backgrid？

SpreadsheetIndex.js.coffee

电子表格/ index.jst.ejs

1 个答案: