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

Question

我有一个Backbone.js应用程序，正在尝试与Backgrid集成，但我很难理解应该在哪里调用new Backgrid。我试着在渲染后在视图中调用它，但添加网格不起作用，因为实际上还没有渲染。这里有一些代码：

电子表格索引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），并且它现在使用@$而不是$。

---

当我在这里的时候，你可以做一些其他的事情来让你的代码更加表意：

1. 说class D3.Views.SpreadsheetsIndex extends Support.CompositeView而不是JavaScriptyD3.Views.SpreadsheetsIndex = Support.CompositeView.extend
2. 使用@而不是this，例如使用@tables = options.table而不是使用this.tables = options.table

3. 如果你认为字符串插值更干净，你可以使用字符串插值代替+：

   @$("##{table.escape('id')}")
   

4. 您很少需要bindAll，而不是_.bindAll(this, 'render')，您可以将render定义为render: =>，以使绑定自动发生。

5. CoffeeScript中很少需要var self = this技巧，通常可以使用=>。这里你不需要任何一个：

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

   你只需要renderSpreadsheets: -> @$('tbody').empty()