与Ember的桌面集成
我试图将ember-models链接到ember-table，以便从服务器提取分页记录，并在向下滚动时将它们添加到表格中。
我可以通过请求我的api网址来获得它的工作方式，就像http://addepar.github.io/ember-table/上的ajax示例一样，但我无法弄清楚如何将它与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'
是可能的还是这会减慢速度？
谢谢您的帮助。 干草堆
这里有一个我用Ember Data和RESTAdapter工作的JSBin：http: RESTAdapter
它与AJAX加载示例非常类似，但使用Ember Data加载数据。 我创建了一个立即返回到Ember Table的RowProxy对象，以便它可以渲染一行。 在Ember Data加载一个充满数据的页面后，它将在更新视图的RowProxy上设置object属性。
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);
}
});
上一篇: table integration with Ember
下一篇: data use the URL that ember is loading for the REST request