Ember.js Разбирает Ember RecordArray

Знаете ли вы, что данные, возвращаемые из хранилища данных Ember, относятся к типу DS.RecordArray Ember? Как бы мы это проанализировали? Что, если бы мы хотели этим манипулировать? Не беспокойтесь, я покажу вам, как это сделать.

В этом посте я буду использовать ловушку setupController в маршруте для установки свойств маршрута.

entity: {
  accounts: [
    {
      name: 'one'
    },
    {
      name: 'two'
    }
  ]
}

Чтобы упростить задачу, предположим, что наш магазин возвращает объект entity со свойством accounts, который представляет собой массив объектов со своими собственными свойствами.

Итак, давайте попробуем перебрать этот возвращенный объект, не так ли?

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let { entity_id } = params
    return Ember.RSVP.hash({
      entity: this.get('store').findRecord('entity', entity_id)
    })
  },
  setupController(controller, model) {
    this._super(controller, model)
    let accounts = model.entity.get('accounts')
    // this works fine
    accounts.forEach((acc) => {
      console.log(acc.get('name'))
    })
  }
});

Одно небольшое примечание о RecordArray Ember заключается в том, что вместо использования оператора .operator для доступа к свойству объекта вы должны использовать метод get (‘objectName’), как я использовал его в приведенном выше коде.

В приведенном выше коде я извлек свойство account из объекта entity внутри setupController. Затем я просматриваю каждую учетную запись и записываю ее в консоль.

Что ж, по этой логике я должен быть в состоянии перебрать его, используя обычный цикл for и обращаясь к массиву с обозначением скобок [], верно? Итак, давайте обновим наш код, чтобы включить цикл for.

import Ember from 'ember';
export default Ember.Route.extend({
  model(params) {
    let { entity_id } = params
    return Ember.RSVP.hash({
      entity: this.get('store').findRecord('entity', entity_id)
    })
  },
  setupController(controller, model) {
    this._super(controller, model)
    let accounts = model.entity.get('accounts')
    // but this doesnt work
    for (let i = 0; i < accounts.get('length'); i++) {
      console.log(accounts[i]) // this is undefined
    }
  }
});

Еще одно небольшое примечание: Ember RecordArray имеет встроенное свойство, называемое length, к которому мы можем получить доступ, чтобы получить длину массива. Более подробную информацию об этом можно найти здесь в документации Ember.

Так почему же accounts[i] вернул нам undefined? Это связано с тем, как Ember RecordArray реализован под капотом. Чтобы получить к нему доступ, как мы привыкли к обычным массивам, нужно использовать их встроенный метод для RecordArrays, называемый objectAt(index). Поэтому вместо использования account [i] вам нужно будет do accounts.objectAt(i). Для получения дополнительной информации вы можете перейти здесь и ознакомиться с их руководством.

После того, как вы воспользуетесь методом objectAt(index), вы сможете получить доступ к свойству объекта так же, как раньше, accounts.objectAt(i).name.

Мне потребовалось время, чтобы это понять, но как только я это сделал, я смог вернуться в свой поток и продолжить свой проект. Надеюсь, это поможет тем из вас, кто был в той же ситуации, что и я, но не мог понять этого! Ударься головой об стену и никогда не сдавайся!

Ember.js Разбирает Ember RecordArray

Вопросы по теме