Ember表与Ember-model / Ember-data的集成 [英] Ember-table integration with Ember-model / Ember-data

问题描述

我可以将ember-model与ember-table关联起来，从服务器上拉取分页记录，并将其添加到表中。只需通过 http：// addepar。 github.io/ember-table/ ，但是我无法弄清楚如何将它与ember-model进行集成以创建和删除对象，然后将其添加到表中。

这是我的代码，只是做一个ajax请求并添加到表。任何人都可以告诉我如何改变它，以使用ember-model / ember-data。

  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'，是
 
 requestGithubEvent：（page） - > 
 
 content = @get'content'
 start =（page  -  1）* 30 
 end = start + 30 
 per_page = 40 
＃something喜欢这个 ？？？ 
＃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是content.get（'length'） -  1 
＃content.pushObjects（new Array（30））
 row = content [index] 
返回行if row而不是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 
 
列：Ember.computed  - > 
 
 columnNames = ['id'，'name'] 
 columns = columnNames.map（key，index） - > 
 Ember.Table.ColumnDefinition.create 
 columnWidth：150 
 headerCellName：key.w（）
 contentPath：key 
 
 columns 
。属性（）
 
内容：Ember.computed  - > 
 App.TableAjaxExample.LazyDataSource.create 
 
 content：new Array（@get（'numRows'））
 .property'numRows'
  

是否可能会减慢到多少？

感谢您的帮助。
Rick

解决方案

这是一个JSBin，我使用了Ember Data和 RESTAdapter ： http://jsbin.com/eVOgUrE/3/edit

它与AJAX加载示例非常相似，但使用Ember Data加载数据。我创建了一个 RowProxy 对象，它们立即返回到Ember Table，以便它可以呈现一行。在Ember Data加载一个包含数据的页面之后，它将在 RowProxy 中设置更新视图的对象 p>

  window.App = Ember.Application.create（）; 
 
 //将被加载到Ember Table的主模型
 App.Gallery = DS.Model.extend（{
 name：DS.attr（'string'）， 
 smallUrl：DS.attr（'string'）
}）; 
 
 //这是一个临时缓冲区对象，它位于
 // Ember Table和模型对象之间（在这种情况下为Gallery）。 
 App.RowProxy = Ember.Object.extend（{
 object：null，
 getObjectProperty：function（prop）{
 var obj = this.get（'object'）; 
 if（obj）{console.log（prop +：+ obj.get（prop））;} 
 return obj？obj.get（prop）：'loading ...'; 
}，
 isLoaded：function（）{return !! this.get（'object'）;} .property（'object'），
 name：function（）{return this.getObjectProperty （'name'）;} .property（'object.name'），
 id：function（）{return this.getObjectProperty（'id'）;} .property（'object.id'），
 smallUrl：function（）{return this.getObjectProperty（'smallUrl'）;} .property（'object.smallUrl'）
}）; 
 
 App.ApplicationController = Ember.Controller.extend（{
 tableController：Ember.computed（function（）{
 return Ember.get（'App.TableAjaxExample.TableController'） .create（{
 //我们需要通过商店，以便表可以使用它
 store：this.get（'store'）
}）; 
} ）
}）; 
 
 App.TableAjaxExample = Ember.Namespace.create（）; 
 
 App.TableAjaxExample.ImageTableCell = Ember.Table.TableCell.extend（{
 templateName：'img-table-cell'，
 classNames：'img-table-cell' 
}）; 
 
 App.TableAjaxExample.LazyDataSource = Ember.ArrayProxy.extend（{
 requestPage：function（page）{
 var content，end，start，url，_i，_results，
 _this = this; 
 
 content = this.get（'content'）; 
 start =（page  -  1）* 3; 
 end = start + 3; 
 
 //查找画廊，然后更新RowProxy以将画廊保存为对象
 this.get（'store'）。find（'gallery'，{page_size：3，page ：page}）然后（function（galleries）{
 return galleries.forEach（function（gallery，index）{
 var position = start + index; 
 content [position] .set 'object'，gallery）; 
}）; 
}）; 
 
 //使用RowProxy对象填充'content'数组
 //从'请求GithubEvent'方法的原始示例
 return（function（）{
 _results = []; 
 for（var _i = start; start< = end？_i< end：_i& ; end; start< = end？_i + +：_i  - ）{_results.push（_i）; } 
 return _results; 
}）。apply（this）.forEach（function（index）{
 return content [index] = App.RowProxy.create（{
 index：index 
}）; 
}）; 
}，
 
 objectAt：function（index）{
 var content，row; 
 content = this.get（'content'）; 
 row = content [index]; 
 if（row&！row.get（'error'））{
 return row; 
} 
 this.requestPage（Math.floor（index / 3 + 1））; 
 return content [index]; 
} 
}）; 
 
 App.TableAjaxExample.TableController = Ember.Table.TableController.extend（{
 hasHeader：true，
 hasFooter：false，
 numFixedColumns：0，
 numRows：19，
 rowHeight：35，
列：Ember.computed（function（）{
 var avatar，columnNames，columns; 
 
 avatar = Ember。 Table.ColumnDefinition.create（{
 columnWidth：80，
 headerCellName：'smallUrl'，
 tableCellViewClass：'App.TableAjaxExample.ImageTableCell'，
 contentPath：'smallUrl'
}）; 
 columnNames = ['id'，'name']; 
 columns = columnNames.map（function（key，index）{
 return Ember.Table.ColumnDefinition.create （{
 columnWidth：150，
 headerCellName：key.w（），
 contentPath：key 
}）; 
}）; 
 columns.unshift （avatar）; 
 return columns; 
}）。property（），
 content：Ember.computed（function（）{
 return App.TableAjaxExample .LazyDataSource.create（{
 content：new Array（this.get（'numRows'）），
 store：this.get（'store'）
}）; 
}）。property（'numRows'）
}）; 
 
 
 App.ApplicationAdapter = DS.RESTAdapter.extend（{
 host：'http://files.cloudhdr.com/api/v1/public'，
 //这里是使用API​​参数中的下划线
 pathForType：function（type）{
 var underscored = Ember.String.underscore（type）; 
 return Ember.String.pluralize强调）; 
} 
}）; 
 
 //下面的一切都在这里使用API​​参数中的下划线。 
 //你可能需要或可能不需要这个。 
 
 DS.RESTSerializer.reopen（{
 modelTypeFromRoot：function（root）{
 console.log（modelTypeFromRoot+ root）; 
 var camelized = Ember。 String.camelize（root）; 
返回Ember.String.singularize（camelized）; 
} 
}）; 
 
 App.ApplicationSerializer = DS.RESTSerializer.extend（{
 normalize：function（type，hash，property）{
 var normalized = {}，normalizedProp; 
 
 for（var prop in hash）{
 if（prop.substr（-3）==='_id'）{
 // belongsTo relationships 
 normalizedProp = prop.slice （0，-3）; 
} else if（prop.substr（-4）==='_ids'）{
 // hasMany relation 
 normalizedProp = Ember.String.pluralize prop.slice（0，-4））; 
} else {
 // regualarAttribute 
 normalizedProp = prop; 
} 
 
 normalizedProp = Ember。 String.camelize（normalizedProp）; 
归一化[normalizedProp] = hash [prop]; 
} 
 
返回this._super（type，normalized，property）; 
 } 
}）; 
  

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

解决方案

Here's a JSBin that I got working with Ember Data and the RESTAdapter: http://jsbin.com/eVOgUrE/3/edit

It works very similarly to the AJAX loading example, but uses Ember Data to load the data. I created a RowProxy object that is returned immediately to the Ember Table so that it can render a row. After Ember Data loads a page full of data it sets the object property on the RowProxy which updates the view.

window.App = Ember.Application.create();

// The main model that will be loaded into Ember Table 
App.Gallery = DS.Model.extend({
  name: DS.attr('string'),
  smallUrl: DS.attr('string')
});

// This is a temporary buffer object that sits between
// Ember Table and the model object (Gallery, in this case).
App.RowProxy = Ember.Object.extend({
  object:null,
  getObjectProperty : function(prop){
    var obj = this.get('object');
    if(obj){ console.log(prop + " : " + obj.get(prop)); }
    return obj ? obj.get(prop) : 'loading...';
  },
  isLoaded : function(){ return !!this.get('object'); }.property('object'),
  name : function(){ return this.getObjectProperty('name'); }.property('object.name'),
  id : function(){ return this.getObjectProperty('id'); }.property('object.id'),
  smallUrl : function(){ return this.getObjectProperty('smallUrl'); }.property('object.smallUrl')
});

App.ApplicationController = Ember.Controller.extend({
  tableController: Ember.computed(function() {
    return Ember.get('App.TableAjaxExample.TableController').create({
      // We need to pass in the store so that the table can use it
      store : this.get('store')
    });
  })
});

App.TableAjaxExample = Ember.Namespace.create();

App.TableAjaxExample.ImageTableCell = Ember.Table.TableCell.extend({
  templateName: 'img-table-cell',
  classNames: 'img-table-cell'
});

App.TableAjaxExample.LazyDataSource = Ember.ArrayProxy.extend({
  requestPage : function(page){
    var content, end, start, url, _i, _results,
      _this = this;

    content = this.get('content');
    start = (page - 1) * 3;
    end = start + 3;

    // Find galleries and then update the RowProxy to hold a gallery as 'object'
    this.get('store').find('gallery',{page_size:3,page:page}).then(function(galleries){
      return galleries.forEach(function(gallery, index) {    
        var position = start + index;
        content[position].set('object',gallery);
      });  
    });

    // Fill the 'content' array with RowProxy objects
    // Taken from the 'requestGithubEvent' method of the original example
    return (function() {
      _results = [];
      for (var _i = start; start <= end ? _i < end : _i > end; start <= end ? _i++ : _i--){ _results.push(_i); }
      return _results;
    }).apply(this).forEach(function(index) {
      return content[index] = App.RowProxy.create({
        index: index
      });
    });
  },

  objectAt: function(index) {
    var content, row;
    content = this.get('content');
    row = content[index];
    if (row && !row.get('error')) {
      return row;
    }
    this.requestPage(Math.floor(index / 3 + 1));
    return content[index];
  }
});

App.TableAjaxExample.TableController = Ember.Table.TableController.extend({
  hasHeader: true,
  hasFooter: false,
  numFixedColumns: 0,
  numRows: 19,
  rowHeight: 35,
  columns: Ember.computed(function() {
    var avatar, columnNames, columns;

    avatar = Ember.Table.ColumnDefinition.create({
      columnWidth: 80,
      headerCellName: 'smallUrl',
      tableCellViewClass: 'App.TableAjaxExample.ImageTableCell',
      contentPath: 'smallUrl'
    });
    columnNames = ['id', 'name'];
    columns = columnNames.map(function(key, index) {
      return Ember.Table.ColumnDefinition.create({
        columnWidth: 150,
        headerCellName: key.w(),
        contentPath: key
      });
    });
    columns.unshift(avatar);
    return columns;
  }).property(),
  content: Ember.computed(function() {
    return App.TableAjaxExample.LazyDataSource.create({
      content: new Array(this.get('numRows')),
      store : this.get('store')
    });
  }).property('numRows')
});


App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: 'http://files.cloudhdr.com/api/v1/public',
  // This is here to use underscores in API params
  pathForType: function(type) {
    var underscored = Ember.String.underscore(type);
    return Ember.String.pluralize(underscored);
  }
});

// Everything below is all here to use underscores in API params.
// You may or may not need this.

DS.RESTSerializer.reopen({
  modelTypeFromRoot: function(root) {
    console.log("modelTypeFromRoot " + root);
    var camelized = Ember.String.camelize(root);
    return Ember.String.singularize(camelized);
  }
});

App.ApplicationSerializer = DS.RESTSerializer.extend({
  normalize: function(type, hash, property) {
    var normalized = {}, normalizedProp;

    for (var prop in hash) {
      if (prop.substr(-3) === '_id') {
        // belongsTo relationships
        normalizedProp = prop.slice(0, -3);
      } else if (prop.substr(-4) === '_ids') {
        // hasMany relationship
        normalizedProp = Ember.String.pluralize(prop.slice(0, -4));
      } else {
        // regualarAttribute
        normalizedProp = prop;
      }

      normalizedProp = Ember.String.camelize(normalizedProp);
      normalized[normalizedProp] = hash[prop];
    }

    return this._super(type, normalized, property);
  }
});

这篇关于Ember表与Ember-model / Ember-data的集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！