ember.js – Ember-table与Ember-model / Ember-data的集成

我正在尝试将ember-model与ember-table相关联,以从服务器中提取分页记录,并在向下滚动时将它们添加到表中.

我可以通过在http://addepar.github.io/ember-table/的ajax示例中请求我的api url的页面号来获得它的工作,但是我不能弄清楚如何将它与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',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'

这是可能的还是这样慢下来呢？

谢谢您的帮助.
干草堆

解决方法

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

它与AJAX加载示例非常相似,但使用Ember Data加载数据.我创建了一个RowProxy对象,它立即返回到Ember Table,以便它可以呈现一行.在Ember Data加载完整数据的页面之后,它将在RowProxy中设置对象属性来更新视图.

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);
  }
});

原文地址：https://www.jb51.cc/js/152608.html

ember.js – Ember-table与Ember-model / Ember-data的集成

解决方法

相关推荐