Блог

Главная - Вопросы по программированию - Инициализировать массив в компоненте Ember JS

Инициализировать массив в компоненте Ember JS

#javascript #ember.js

#javascript #ember.js

Вопрос:

Я новичок в Ember и в настоящее время работаю над версией Ember 3.8. Я просто хочу, чтобы массив был инициализирован в файле компонента, а затем использовать массив в файле шаблона. Заранее спасибо.

Ответ №1:

@mistahenry предлагает инициализировать массив в функции инициализации следующим образом

 init() {
    this._super(...arguments);
    this.set('foo', [{
      id: 0,
      name: "baz"
    }, {
      id: 1,
      name: "bazzz"
    }]);
  }

в противном случае возникает ошибка eslint с последней версией Ember 3.8.

на стороне js вы можете инициализировать следующим образом

 import { computed } from '@ember/object';

export default Component.extend({
  foo: computed(function() {
    return [{id:0,name:"baz"},{id:1,name:"bazzz"}]
  }),
  ...
});

на стороне шаблона просто вызовите свою переменную

 {{#each foo as |item|}}
  {{item.name}}
{{/each}}

Комментарии:

1. `ошибка Только строка, число, символ, логическое значение, null, неопределенное значение и функция разрешены в качестве свойств по умолчанию ember / avoid-leaking-state-in-ember-objects ` Это ошибка, которую я получаю при попытке инициализировать массив

2. Можете ли вы выдать свою ошибку с помощью ember-twiddle? Я предполагаю, что вы обновили свой ember новой версией и получаете эту ошибку.

3. Да, я использую последнюю версию ember js и ember cli. Ранее я получал ошибку, теперь я скомпилировал ее снова, и моя проблема была решена. Большое спасибо за вашу помощь.

4. Ошибка вызвана правилом компоновки, предоставленным eslint-plugin-ember . Это должно избегать утечки состояния между экземплярами компонента. Если вы сделаете это, как предложено в ответе, каждый экземпляр компонента будет использовать один и тот же массив. Возможно, это не проблема, если он статичен, но это становится странным, как только вы добавляете или удаляете элементы из этого массива. Это исправлено в среднесрочной перспективе с помощью поля класса, но на данный момент вам не следует использовать массивы и объекты в качестве значений в EmberObject.extend({}) . Обертывание их в computed является самой простой и устоявшейся практикой: computed(() => ['bar])

5. @A.KursatUZUN Я думаю, вам следует отредактировать свой ответ. То, что вы предлагаете, приведет к ошибке компоновки для любого, кто использует последнюю версию ember. Либо используйте вычисляемый, как jelhan предложено, либо используйте init(){ this._super(...arguments); this.set('foo', [{id:0,name:"baz"},{id:1,name:"bazzz"}]);} Я лично предпочитаю решение инициализации, потому что свойство не является computed в истинном смысле

Ответ №2:

Лучший способ инициализировать массив в объекте Ember (подклассом которого является компонент) — это использовать помощник Ember A . Это функция, которая возвращает новый изменяемый массив (который предоставляет множество полезных методов поверх обычного [] .

Новый синтаксис:

 import Component from '@ember/component';
import { A } from '@ember/array';

export default class MyComponent extends Component {
  myArray = A()
}

Устаревший синтаксис

 export default Component.extend({
  myArray: A()
})

Почему это вообще проблема? Потому что, когда вы определяете компонент, вы определяете фабрику для этого компонента. Когда приходит время его использовать, ember возвращает новый экземпляр этого класса компонента. Массивы в javascript изменяемы и хранятся по ссылке, поэтому, когда вы обновляете этот массив, а затем создаете новый экземпляр компонента, новое значение массива также обновляется.

Смотрите эту статью для получения дополнительной информации:https://dockyard.com/blog/2015/09/18/ember-best-practices-avoid-leaking-state-into-factories

Ответ №3:

Вы можете создать новый Ember.NativeArray с помощью init подключения в вашем компоненте / контроллере.

 import Component from '@ember/component';
import { A } from '@ember/array';

export default Component.extend({
  tagName: 'ul',
  classNames: ['pagination'],

  init() {
    this._super(...arguments);

    if (!this.get('content')) {
      this.set('content', A());
      this.set('otherContent', A([1,2,3]));
    }
  }
});

Комментарии:

1. В качестве свойств по умолчанию допускаются только строка, число, символ, логическое значение, null, undefined и функция. Вы не можете напрямую инициализировать [ ] в свойстве ember. вы должны использовать classNames: computed(function() { return ['pagination'] })

2. Вы уверены, что проверили ссылку на ОФИЦИАЛЬНУЮ ДОКУМЕНТАЦИЮ из моего сообщения???

3. Вы можете взглянуть на правило eslint github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules /…

4. Странно, что основная команда не знает об этом правиле)

5.Я надеюсь, что они верны. Component elements не обязательно следовать eslint-правилам. Например: tagName classNames может быть array guides.emberjs.com/release/components /…