2

Ember Data を使用してデータを Ember テーブルにバインドし、連絡先のリストを表示しようとしています。この質問に基づいてコードを作成していますが、まだ何かが足りないようです。テーブルが作成され、プロキシ オブジェクトが取り込まれ、データをフェッチする promise が実行されます。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>

編集:私の JSON 応答がモデルに正しく逆シリアル化されない Ember Data の問題であるかのように見えます。コンソールに次のように入力すると：

Crm.Contact.find();
Crm.Group.find(); // another model of mine

グループについては、レコードの配列とそのデータ値を確認できます。連絡先については、レコードの配列が表示されますが、すべてのデータが null です。どんな考えやヒントも大歓迎です。私が使用しているのは、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

解決するために私がしたことは次のとおりです。

于 2014-05-20T18:06:34.683 に答える
0

ember-tableをバインドする非常に簡単な方法contentは、テンプレート内からです。

次のコードを使用してテンプレートを使用して表示できる場合は、ember データの場合:

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

次に、ember テーブルの content フィールドを同様にバインドできるはずです。

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

model両方の が同一で、適切にロードされている場所。

これは、特に Ember-Data を使用する場合に、コントローラー自体からコンテンツを計算しようとするよりもはるかに簡単に思えます。

于 2015-10-31T18:37:55.923 に答える