我正在尝试使用Ember Data将数据绑定到Ember Table并显示联系人列表。我的代码基于this question，但我似乎仍然遗漏了一些东西。使用代理对象创建并填充表，并执行获取数据的承诺。我在promise响应中找回了我期望的JSON数据，但看起来行代理的对象始终保持为null。这是我到目前为止所做的事情（省略路线等一些事情）：
window.Crm = Ember.Application.create({
});
Crm.Store = DS.Store.extend({
adapter: DS.RESTAdapter,
url: 'http://mywebsiteurl.com'
});
Crm.Contact = DS.Model.extend({
id: DS.attr('string'),
prefix: DS.attr('string'),
firstName: DS.attr('string'),
middleName: DS.attr('string'),
lastName: DS.attr('string'),
suffix: DS.attr('string'),
gender: DS.attr('string')
});
// contact table data source
Crm.ContactTableDataSource = Ember.ArrayProxy.extend({
// fetch page of contacts
requestPage: function (page) {
var content = this.get('content'),
store = this.get('store'),
start = (page - 1) * 30,
end = start + 30,
_results = [];
store.find(
'contact', { page: page }).then(function (contacts) {
return contacts.forEach(function (contact, index) {
content[start + index].set('object', contact);
});
});
return (function () {
for (var _i = start;
start <= end ? _i < end : _i > end;
start <= end ? _i++ : _i--
) {
_results.push(_i);
}
return _results;
}).apply(this).forEach(function (index) {
content[index] = Crm.ContactRowProxy.create({
index: index
});
return content[index];
});
},
objectAt: function (index) {
var content = this.get('content'),
row = content[index];
if (row && !row.get('error')) {
return row;
}
this.requestPage(Math.floor(index / 30 + 1));
return content[index];
}
});
// a proxy row that sits in between the table and server response
Crm.ContactRowProxy = Ember.Object.extend({
object: null,
getObjectProperty: function (property) {
var obj = this.get('object');
return obj ? obj.get(property) : '...';
},
isLoaded: function () {
return this.get('object') !== undefined;
}.property('object'),
id: function () {
return this.getObjectProperty('id');
}.property('object.id'),
prefix: function () {
return this.getObjectProperty('prefix');
}.property('object.prefix'),
firstName: function () {
return this.getObjectProperty('firstName');
}.property('object.firstName'),
middleName: function () {
return this.getObjectProperty('middleName');
}.property('object.middleName'),
lastName: function () {
return this.getObjectProperty('lastName');
}.property('object.lastName'),
suffix: function () {
return this.getObjectProperty('suffix');
}.property('object.suffix'),
gender: function () {
return this.getObjectProperty('gender');
}.property('object.gender')
});
Crm.ContactsController = Ember.Table.TableContainer.extend({
numRows: 30,
columns: Ember.computed(function () {
var id, prefix, firstName, middleName, lastName, suffix, gender;
id = Ember.Table.ColumnDefinition.create({
columnWidth: 50,
contentPath: 'id',
isSortable: false,
isResizable: false,
canAutoResize: false,
tableCellViewClass: 'Crm.ContactCheckboxTableCell'
});
prefix = Ember.Table.ColumnDefinition.create({
headerCellName: 'Prefix',
getCellContent: function (row) {
return row.get('prefix');
},
textAlign: 'text-align-left',
});
firstName = Ember.Table.ColumnDefinition.create({
headerCellName: 'First Name',
getCellContent: function (row) {
return row.get('firstName');
},
textAlign: 'text-align-left'
});
middleName = Ember.Table.ColumnDefinition.create({
headerCellName: 'Middle Name',
getCellContent: function (row) {
return row.get('middleName');
},
textAlign: 'text-align-left'
});
lastName = Ember.Table.ColumnDefinition.create({
headerCellName: 'Last Name',
getCellContent: function (row) {
return row.get('lastName');
},
textAlign: 'text-align-left'
});
suffix = Ember.Table.ColumnDefinition.create({
headerCellName: 'Suffix',
getCellContent: function (row) {
return row.get('suffix');
},
textAlign: 'text-align-left'
});
gender = Ember.Table.ColumnDefinition.create({
headerCellName: 'Gender',
getCellContent: function (row) {
return row.get('gender');
},
textAlign: 'text-align-left'
});
return [id, prefix, firstName, middleName, lastName, suffix, gender];
}).property(),
content: Ember.computed(function () {
return Crm.ContactTableDataSource.create({
content: new Array(this.get('numRows')),
store: this.get('store')
});
}).property('numRows'),
actions: {
}
});
Crm.ContactCheckboxTableCell = Ember.Table.TableCell.extend({
templateName: 'contact-checkbox-cell',
classNames: 'contact-checkbox-cell'
});
JSON回复：
{
"contacts": [
{
"id": 46,
"prefix": null,
"firstName": "Amy",
"middleName": null,
"lastName": "Wong",
"suffix": null,
"gender": null
},
{
"id": 23,
"prefix": null,
"firstName": "Bender",
"middleName": "Bending",
"lastName": "Rodriguez",
"suffix": null,
"gender": null
},
{
"id": 21,
"prefix": null,
"firstName": "Bro",
"middleName": null,
"lastName": "Namath",
"suffix": null,
"gender": null
},
{
"id": 35,
"prefix": null,
"firstName": "Bruce",
"middleName": null,
"lastName": "Dickinson",
"suffix": null,
"gender": null
},
{
"id": 39,
"prefix": null,
"firstName": "Chase",
"middleName": null,
"lastName": "Utley",
"suffix": null,
"gender": null
},
{
"id": 25,
"prefix": null,
"firstName": "Clint",
"middleName": null,
"lastName": "Eastwood",
"suffix": null,
"gender": null
},
{
"id": 14,
"prefix": null,
"firstName": "Digg",
"middleName": null,
"lastName": "Dugg",
"suffix": null,
"gender": null
},
{
"id": 26,
"prefix": null,
"firstName": "Dirty",
"middleName": null,
"lastName": "Harry",
"suffix": null,
"gender": null
},
{
"id": 32,
"prefix": null,
"firstName": "Doctor",
"middleName": null,
"lastName": "Dre",
"suffix": null,
"gender": null
},
{
"id": 20,
"prefix": null,
"firstName": "Dude",
"middleName": null,
"lastName": "Von Manstein",
"suffix": null,
"gender": null
},
{
"id": 30,
"prefix": null,
"firstName": "Eazy",
"middleName": null,
"lastName": "E",
"suffix": null,
"gender": null
},
{
"id": 28,
"prefix": null,
"firstName": "Eli",
"middleName": null,
"lastName": "Roth",
"suffix": null,
"gender": null
},
{
"id": 37,
"prefix": null,
"firstName": "Eric",
"middleName": null,
"lastName": "Clapton",
"suffix": null,
"gender": null
},
{
"id": 22,
"prefix": null,
"firstName": "Hedonism",
"middleName": null,
"lastName": "Bot",
"suffix": null,
"gender": null
},
{
"id": 43,
"prefix": null,
"firstName": "Hermes",
"middleName": null,
"lastName": "Conrad",
"suffix": null,
"gender": null
},
{
"id": 15,
"prefix": null,
"firstName": "Homer",
"middleName": null,
"lastName": "Thompson",
"suffix": null,
"gender": null
},
{
"id": 13,
"prefix": null,
"firstName": "Homey",
"middleName": "The",
"lastName": "Clown",
"suffix": null,
"gender": null
},
{
"id": 45,
"prefix": null,
"firstName": "Hubert",
"middleName": null,
"lastName": "Farnsworth",
"suffix": null,
"gender": null
},
{
"id": 31,
"prefix": null,
"firstName": "Ice",
"middleName": null,
"lastName": "Cube",
"suffix": null,
"gender": null
},
{
"id": 38,
"prefix": null,
"firstName": "Jimi",
"middleName": null,
"lastName": "Hendrix",
"suffix": null,
"gender": null
},
{
"id": 12,
"prefix": null,
"firstName": "John",
"middleName": null,
"lastName": "Jones",
"suffix": null,
"gender": null
},
{
"id": 44,
"prefix": null,
"firstName": "John",
"middleName": null,
"lastName": "Zoidberg",
"suffix": null,
"gender": null
},
{
"id": 27,
"prefix": null,
"firstName": "Lee",
"middleName": null,
"lastName": "Van Cleef",
"suffix": null,
"gender": null
},
{
"id": 34,
"prefix": null,
"firstName": "Luther",
"middleName": null,
"lastName": "Vandross",
"suffix": null,
"gender": null
},
{
"id": 11,
"prefix": null,
"firstName": "Markus",
"middleName": null,
"lastName": "Summerstein",
"suffix": null,
"gender": null
},
{
"id": 29,
"prefix": null,
"firstName": "Marty",
"middleName": null,
"lastName": "McFly",
"suffix": null,
"gender": null
},
{
"id": 24,
"prefix": null,
"firstName": "Phillip",
"middleName": "J",
"lastName": "Fry",
"suffix": null,
"gender": null
},
{
"id": 40,
"prefix": null,
"firstName": "Phillip",
"middleName": null,
"lastName": "Fry",
"suffix": null,
"gender": null
},
{
"id": 33,
"prefix": null,
"firstName": "Ping Pong",
"middleName": null,
"lastName": "Von Laserstein",
"suffix": null,
"gender": null
},
{
"id": 41,
"prefix": null,
"firstName": "Robot",
"middleName": null,
"lastName": "Devil",
"suffix": null,
"gender": null
}
]
}
模板：
<div class="table-container" style="height:450px;">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
numFixedColumns=1
}}
</div>
编辑：看起来好像是Ember数据问题，我的JSON响应无法正确反序列化到模型中。当我在控制台中键入以下内容时：
Crm.Contact.find();
Crm.Group.find(); // another model of mine
对于群组，我可以看到记录数组及其数据值。对于联系人，我看到记录数组，但所有数据都为空。任何想法或提示将不胜感激。我正在使用：Ember 1.5.1，Ember Data 0.0.14，Handlebars 1.3.0，Ember Table 0.0.2和jQuery 2.1.0。
答案 0 :(得分：1)
以下是我要解决的问题：
答案 1 :(得分：0)
绑定ember表的content的一种非常简单的方法是在模板中。
对于您的余烬数据，如果您可以使用以下代码通过模板查看它：
{{#each model as |part|}}
<li>{{part.name}}</li>
{{/each}}
然后你应该能够类似地绑定ember-table的内容字段：
{{ember-table
hasFooter=false
columns=tableColumns
content=model
}}
两者中的model相同且正确加载。
这似乎比尝试从控制器本身计算内容要简单得多，尤其是在使用Ember-Data时。