2

我正在尝试使用 Ember Data 将数据绑定到 Ember 表并显示联系人列表。我的代码基于这个问题，但我似乎仍然遗漏了一些东西。该表被创建并使用代理对象填充，并执行获取数据的承诺。我在承诺响应中取回了我期望的 JSON 数据，但看起来行代理的对象始终保持为空。这是我到目前为止所拥有的（省略了一些东西，比如路线等）：

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 Data 问题，我的 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。

4

2 回答 2

1

这是我为解决问题所做的：

  • 升级到 Ember-Data 1.0.0-beta.7
  • 浏览我的代码并根据此处的迁移指南进行更改
  • 在 Crm.ContactsController content() 方法中将“this.get('store')”代码更改为“this.store”
于 2014-05-20T18:06:34.683 回答
0

绑定 ember-table 的一种非常直接的方法content是在模板中。

对于您的 ember 数据，如果您可以使用以下代码通过模板查看它：

{{#each model as |part|}}
  <li>{{part.name}}</li>
{{/each}}

然后您应该能够类似地绑定 ember-table 的内容字段：

{{ember-table
 hasFooter=false
 columns=tableColumns
 content=model
}}

两者中model的内容相同且已正确加载。

这似乎比尝试从控制器本身计算内容要简单得多，尤其是在使用 Ember-Data 时。

于 2015-10-31T18:37:55.923 回答