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

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

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 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 http://addepar.github.io/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

ember-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Ecommerce MERN(MongoDB Express.js React.js Node.js) Redux Tailwind

Ecommerce MERN(MongoDB Express.js React.js Node.js) Redux Tailwind