2
J'essaie d'utiliser les données Ember pour lier des données à Ember Table et afficher une liste de contacts. Je base mon code sur this question mais il me semble toujours qu'il manque quelque chose. La table est créée et remplie avec les objets proxy et la promesse d'extraction des données est exécutée. Je récupère les données JSON attendues dans la réponse de la promesse, mais il semble que l'objet du proxy de ligne reste toujours nul. Voici ce que j'ai jusqu'à présent (en omettant certaines choses comme les routes, etc.):Combinaison d'une table Ember avec des données Ember
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'
});
réponse 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
}
]
}
Et le modèle:
<div class="table-container" style="height:450px;">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
numFixedColumns=1
}}
</div>
Edit: Il Il semble que ce soit un problème de données Ember dans lequel ma réponse JSON ne désérialise pas correctement le modèle. Lorsque je tape ce qui suit dans la console:
Crm.Contact.find();
Crm.Group.find(); // another model of mine
Pour les groupes, je peux voir le tableau d'enregistrements et leurs valeurs de données. Pour le contact, je vois le tableau des enregistrements mais toutes les données sont nulles. Toutes les pensées ou les conseils seraient grandement appréciés. J'utilise: Ember 1.5.1, Ember Data 0.0.14, Handlebars 1.3.0, Ember Table 0.0.2 et jQuery 2.1.0.