Ember-table integration with Ember-model / Ember-data

Ember Data
1

Hi all

I am trying to link ember-models to the ember-table to pull paginated records from the server and add them to the table when scrolling down.

I can get it working by just requesting my api url with page number like in the ajax example on Ember Table but i cant figure out how to integrate it with ember-model to create and ember objects and then add them to the table.

Here is my code to just make an ajax request and add to table. Can anyone tell me how i can change this to use ember-model / ember-data instead.

App.TableAjaxExample = Ember.Namespace.create()

App.TableAjaxExample.LazyDataSource = Ember.ArrayProxy.extend

  createGithubEvent: (row, event) ->

    row.set 'id',       event.id
    row.set 'name',  event.name
    row.set 'isLoaded',   yes

  requestGithubEvent: (page) ->

    content = @get 'content'
    start   = (page - 1) * 30
    end     = start + 30
    per_page = 40
    # something like this ???
    #App.Detail.find(type: 'companies', page: page, per_page: per_page).on 'didLoad', ->
    url = "http:/myurl.dev/admin/details.json?type=companies&page=#{page}&per_page=30"
    Ember.$.getJSON url, (json) =>
      json.details.forEach (event, index) =>
        row = content[start + index]
        @createGithubEvent row, event
    [start...end].forEach (index) ->
      content[index] = Ember.Object.create eventId: index, isLoaded: no

  objectAt: (index) ->

    content = @get 'content'
    #if index is content.get('length') - 1
    #  content.pushObjects(new Array(30))
    row = content[index]
    return row if row and not row.get('error')
    @requestGithubEvent Math.floor(index / 30 + 1)
    content[index]

App.TableAjaxExample.TableController =
Ember.Table.TableController.extend

  hasHeader: yes
  hasFooter: no
  numFixedColumns: 0
  numRows: 21054
  rowHeight: 35

  columns: Ember.computed ->

    columnNames = ['id', 'name']
    columns = columnNames.map (key, index) ->
      Ember.Table.ColumnDefinition.create
        columnWidth: 150
        headerCellName: key.w()
        contentPath: key

    columns
  .property()

  content: Ember.computed ->
    App.TableAjaxExample.LazyDataSource.create

      content: new Array(@get('numRows'))
  .property 'numRows'

Is the possible or does this slow it down to much?

Thanks for the help. Rick

2 Likes