From a6c3e3bfb422cc10cfcd43544751a867996ae773 Mon Sep 17 00:00:00 2001 From: Ben Limmer Date: Thu, 14 Jul 2016 04:21:40 -0500 Subject: [PATCH] [BUGFIX] Always use Ember object `get`. (#101) In many places, we're currently accessing with this.varName, which prevents people using computed properties. --- addon/classes/Table.js | 16 ++--- tests/dummy/app/controllers/selectable.js | 6 +- tests/dummy/app/controllers/table.js | 4 +- tests/dummy/snippets/expandable-table.js | 24 ++++---- tests/dummy/snippets/grouped-table.js | 74 ++++++++++++----------- tests/dummy/snippets/selectable-table.js | 64 ++++++++++---------- tests/dummy/snippets/simple-table.js | 58 +++++++++--------- 7 files changed, 127 insertions(+), 119 deletions(-) diff --git a/addon/classes/Table.js b/addon/classes/Table.js index d0add891..e3bffd6f 100644 --- a/addon/classes/Table.js +++ b/addon/classes/Table.js @@ -241,7 +241,7 @@ export default class Table extends Ember.Object.extend({ * @return {Array} columns */ setColumns(columns = []) { - return this.columns.setObjects(Table.createColumns(columns)); + return this.get('columns').setObjects(Table.createColumns(columns)); } /** @@ -250,7 +250,7 @@ export default class Table extends Ember.Object.extend({ * @param {Object} column */ addColumn(column) { - this.columns.addObject(Table.createColumn(column)); + this.get('columns').addObject(Table.createColumn(column)); } /** @@ -259,7 +259,7 @@ export default class Table extends Ember.Object.extend({ * @param {Array} columns */ addColumns(columns = []) { - this.columns.addObjects(Table.createColumns(columns)); + this.get('columns').addObjects(Table.createColumns(columns)); } /** @@ -270,7 +270,7 @@ export default class Table extends Ember.Object.extend({ */ pushColumn(column) { let _column = Table.createColumn(column); - this.columns.pushObject(_column); + this.get('columns').pushObject(_column); return _column; } @@ -282,7 +282,7 @@ export default class Table extends Ember.Object.extend({ */ pushColumns(columns = []) { let _columns = Table.createColumns(columns); - this.columns.pushObjects(_columns); + this.get('columns').pushObjects(_columns); return _columns; } @@ -295,7 +295,7 @@ export default class Table extends Ember.Object.extend({ */ insertColumnAt(index, column) { let _column = Table.createColumn(column); - this.columns.insertAt(index, _column); + this.get('columns').insertAt(index, _column); return _column; } @@ -305,7 +305,7 @@ export default class Table extends Ember.Object.extend({ * @param {Object} column */ removeColumn(column) { - return this.columns.removeObject(column); + return this.get('columns').removeObject(column); } /** @@ -314,7 +314,7 @@ export default class Table extends Ember.Object.extend({ * @param {Array} columns */ removeColumns(columns = []) { - return this.columns.removeObjects(columns); + return this.get('columns').removeObjects(columns); } /** diff --git a/tests/dummy/app/controllers/selectable.js b/tests/dummy/app/controllers/selectable.js index 698603a8..db19f822 100644 --- a/tests/dummy/app/controllers/selectable.js +++ b/tests/dummy/app/controllers/selectable.js @@ -36,15 +36,15 @@ export default TableController.extend({ actions: { selectAll() { - this.table.rows.setEach('selected', true); + this.get('table.rows').setEach('selected', true); }, deselectAll() { - this.table.get('selectedRows').setEach('selected', false); + this.get('table.selectedRows').setEach('selected', false); }, deleteAll() { - this.table.removeRows(this.table.get('selectedRows')); + this.get('table').removeRows(this.get('table.selectedRows')); } } }); diff --git a/tests/dummy/app/controllers/table.js b/tests/dummy/app/controllers/table.js index be8cf170..655ef996 100644 --- a/tests/dummy/app/controllers/table.js +++ b/tests/dummy/app/controllers/table.js @@ -23,7 +23,7 @@ export default Ember.Controller.extend({ fetchRecords() { this.set('isLoading', true); this.store.query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then(records => { - this.table.addRows(records); + this.get('table').addRows(records); this.set('isLoading', false); this.set('canLoadMore', !isEmpty(records)); }); @@ -44,7 +44,7 @@ export default Ember.Controller.extend({ sort: column.get('valuePath'), page: 1 }); - this.table.setRows([]); + this.get('table').setRows([]); this.fetchRecords(); } } diff --git a/tests/dummy/snippets/expandable-table.js b/tests/dummy/snippets/expandable-table.js index 8a29c06e..ab70156e 100644 --- a/tests/dummy/snippets/expandable-table.js +++ b/tests/dummy/snippets/expandable-table.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import Table from 'ember-light-table'; -const { isEmpty } = Ember; +const { isEmpty, computed } = Ember; export default Ember.Component.extend({ page: 1, @@ -12,23 +12,25 @@ export default Ember.Component.extend({ isLoading: false, canLoadMore: true, - columns: [{ - label: 'First Name', - valuePath: 'firstName' - }, { - label: 'Last Name', - valuePath: 'lastName' - }], + columns: computed(function() { + return [{ + label: 'First Name', + valuePath: 'firstName' + }, { + label: 'Last Name', + valuePath: 'lastName' + }]; + }), init() { this._super(...arguments); - this.set('table', new Table(this.columns)); + this.set('table', new Table(this.get('columns'))); }, fetchRecords() { this.set('isLoading', true); this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then(records => { - this.table.addRows(records); + this.get('table').addRows(records); this.set('isLoading', false); this.set('canLoadMore', !isEmpty(records)); }); @@ -49,7 +51,7 @@ export default Ember.Component.extend({ sort: column.get('valuePath'), page: 1 }); - this.table.setRows([]); + this.get('table').setRows([]); this.fetchRecords(); } } diff --git a/tests/dummy/snippets/grouped-table.js b/tests/dummy/snippets/grouped-table.js index 0afbca11..d5671914 100644 --- a/tests/dummy/snippets/grouped-table.js +++ b/tests/dummy/snippets/grouped-table.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import Table from 'ember-light-table'; -const { isEmpty } = Ember; +const { isEmpty, computed } = Ember; export default Ember.Component.extend({ page: 1, @@ -12,50 +12,52 @@ export default Ember.Component.extend({ isLoading: false, canLoadMore: true, - columns: [{ - label: 'User Details', - sortable: false, - align: 'center', - subColumns: [{ - label: 'Avatar', - valuePath: 'avatar', - width: '60px', + columns: computed(function() { + return [{ + label: 'User Details', sortable: false, - cellComponent: 'user-avatar' + align: 'center', + subColumns: [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last', + valuePath: 'lastName', + width: '150px' + }] }, { - label: 'First', - valuePath: 'firstName', - width: '150px' - }, { - label: 'Last', - valuePath: 'lastName', - width: '150px' - }] - }, { - label: 'Contact Information', - sortable: false, - align: 'center', - subColumns: [{ - label: 'Address', - valuePath: 'address' - }, { - label: 'State', - valuePath: 'state' - }, { - label: 'Country', - valuePath: 'country' - }] - }], + label: 'Contact Information', + sortable: false, + align: 'center', + subColumns: [{ + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }] + }]; + }), init() { this._super(...arguments); - this.set('table', new Table(this.columns)); + this.set('table', new Table(this.get('columns'))); }, fetchRecords() { this.set('isLoading', true); this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then(records => { - this.table.addRows(records); + this.get('table').addRows(records); this.set('isLoading', false); this.set('canLoadMore', !isEmpty(records)); }); @@ -76,7 +78,7 @@ export default Ember.Component.extend({ sort: column.get('valuePath'), page: 1 }); - this.table.setRows([]); + this.get('table').setRows([]); this.fetchRecords(); } } diff --git a/tests/dummy/snippets/selectable-table.js b/tests/dummy/snippets/selectable-table.js index a98840b3..0ace8c01 100644 --- a/tests/dummy/snippets/selectable-table.js +++ b/tests/dummy/snippets/selectable-table.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import Table from 'ember-light-table'; -const { isEmpty } = Ember; +const { isEmpty, computed } = Ember; export default Ember.Component.extend({ page: 1, @@ -12,40 +12,42 @@ export default Ember.Component.extend({ isLoading: false, canLoadMore: true, - columns: [{ - label: 'Avatar', - valuePath: 'avatar', - width: '60px', - sortable: false, - cellComponent: 'user-avatar' - }, { - label: 'First Name', - valuePath: 'firstName', - width: '150px' - }, { - label: 'Last Name', - valuePath: 'lastName', - width: '150px' - }, { - label: 'Address', - valuePath: 'address' - }, { - label: 'State', - valuePath: 'state' - }, { - label: 'Country', - valuePath: 'country' - }], + columns: computed(function() { + return [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First Name', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last Name', + valuePath: 'lastName', + width: '150px' + }, { + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }]; + }), init() { this._super(...arguments); - this.set('table', new Table(this.columns)); + this.set('table', new Table(this.get('columns'))); }, fetchRecords() { this.set('isLoading', true); this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then(records => { - this.table.addRows(records); + this.get('table').addRows(records); this.set('isLoading', false); this.set('canLoadMore', !isEmpty(records)); }); @@ -66,21 +68,21 @@ export default Ember.Component.extend({ sort: column.get('valuePath'), page: 1 }); - this.table.setRows([]); + this.get('table').setRows([]); this.fetchRecords(); } }, selectAll() { - this.table.rows.setEach('selected', true); + this.get('table').rows.setEach('selected', true); }, deselectAll() { - this.table.get('selectedRows').setEach('selected', false); + this.get('table.selectedRows').setEach('selected', false); }, deleteAll() { - this.table.removeRows(this.table.get('selectedRows')); + this.get('table').removeRows(this.get('table.selectedRows')); } } }); diff --git a/tests/dummy/snippets/simple-table.js b/tests/dummy/snippets/simple-table.js index b98229da..9063ea6f 100644 --- a/tests/dummy/snippets/simple-table.js +++ b/tests/dummy/snippets/simple-table.js @@ -1,7 +1,7 @@ import Ember from 'ember'; import Table from 'ember-light-table'; -const { isEmpty } = Ember; +const { isEmpty, computed } = Ember; export default Ember.Component.extend({ page: 1, @@ -12,40 +12,42 @@ export default Ember.Component.extend({ isLoading: false, canLoadMore: true, - columns: [{ - label: 'Avatar', - valuePath: 'avatar', - width: '60px', - sortable: false, - cellComponent: 'user-avatar' - }, { - label: 'First Name', - valuePath: 'firstName', - width: '150px' - }, { - label: 'Last Name', - valuePath: 'lastName', - width: '150px' - }, { - label: 'Address', - valuePath: 'address' - }, { - label: 'State', - valuePath: 'state' - }, { - label: 'Country', - valuePath: 'country' - }], + columns: computed(function() { + return [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First Name', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last Name', + valuePath: 'lastName', + width: '150px' + }, { + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }]; + }), init() { this._super(...arguments); - this.set('table', new Table(this.columns)); + this.set('table', new Table(this.get('columns'))); }, fetchRecords() { this.set('isLoading', true); this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then(records => { - this.table.addRows(records); + this.get('table').addRows(records); this.set('isLoading', false); this.set('canLoadMore', !isEmpty(records)); }); @@ -66,7 +68,7 @@ export default Ember.Component.extend({ sort: column.get('valuePath'), page: 1 }); - this.table.setRows([]); + this.get('table').setRows([]); this.fetchRecords(); } }