Как высушить действия маршрута с компонентом в EmberJS - PullRequest
Новая
       9

Как высушить действия маршрута с компонентом в EmberJS

0 голосов
/ 26 апреля 2018

(EmberJS 2.14)

Я хочу иметь СУХИЕ приложения с ember, однако, кажется, что это невозможно сделать с действиями маршрута. Когда я пытаюсь использовать компонент для кнопки, запускающей действие, она не срабатывает:

new.js: 

  export default Ember.Route.extend({
      model() {.....},
      actions: {
          saveStuff(newStuff) {
            newStuff.save().then(() => this.transitionTo('stuffs'));
          }

new.hbs 

{{basic-button texte="Create" theAction=(action 'saveStuff' model)}}

Ошибка: 

Assertion Failed: An action named 'saveStuff' was not found in (generated Stuffs.new controller)

У меня та же проблема с действием удаления и обновлением. Я не могу смириться с тем, чтобы иметь одинаковый код и строки шаблона на всех маршрутах и ​​представлениях, которые в этом нуждаются.

Ответы [ 3 ]

0 голосов
/ 27 апреля 2018

Мы просто хотели добавить к ответу, который уже есть у Дональда, и, надеюсь, дать вам еще один пример того, как сделать то, чего вы пытаетесь достичь.

Как вы упомянули "повторное использование кода", я думаю, вы уже используете компоненты в своем приложении. Когда я хотел, чтобы одно и то же действие «сохранить» было повторно использовано между несколькими маршрутами, я обычно реализовывал компонент , который имел дело с редактированием модели и фактическим процессом сохранения.

Например, мое основное приложение использует ту же форму для create и edit an instance. В моем app/instances/new/template.hbs я использую компонент edit-instance, и затем я буду использовать этот же компонент в app/instances/edit/template.hbs

{{edit-instance instance=model}}

Я создал тиддл здесь , который демонстрирует этот принцип более подробно. Еще одна вещь, которую он делает, это на самом деле инкапсулирует создание новых экземпляров внутри компонента путем внедрения службы store. 

export default Ember.Component.extend({
  store: Ember.inject.service(),
  ...
})

Это небольшой удобный трюк, который на первый взгляд может показаться странным, потому что все примеры документации показывают только использование хранилища в файле route. Не всегда рекомендуется использовать хранилище в компоненте, но когда это необходимо или если это упрощает вашу реализацию, это полезный инструмент!

Я не уверен, что поддерживаю UX / UI примера в Twiddle, но я думаю, что это помогает объяснить, чего вы можете достичь, если попытаетесь реализовать повторное использование кода внутри компонента.

Вы можете увидеть весь пример, работающий над этим Ember Twiddle , и вы можете увидеть, как мы решаем эту проблему в прямом эфире на этом видео YouTube

Надеюсь, это поможет 10

0 голосов
/ 30 апреля 2018

Я бы предложил просто создать контроллер. Мне нравится предложение Дональда использовать route-action-helper от DockYard (это отличный пакет). Но даже это говорит о том, что вам, вероятно, это не нужно.

Возможно, вам не нужно использовать этот аддон.

Если вы пытаетесь не устанавливать никаких дополнительных пакетов, я настоятельно рекомендую просто перенести ваши действия в контроллер. Контроллеры не устарели и собираются некоторое время, и были созданы для таких ситуаций. Я бы также предложил прочитать эту статью DockYard, на которую они ссылаются, если вы не знакомы с контроллерами.

Артикул: https://dockyard.com/blog/2017/06/16/ember-best-practices-what-are-controllers-good-for

0 голосов
/ 26 апреля 2018

Маршруты плохо обрабатывают действия. Есть 3 варианта:

  1. Вы можете обрабатывать свои действия в маршруте, используя это дополнение https://github.com/DockYard/ember-route-action-helper. Это определяет помощника для использования, например:

    {{basic-button texte = "Создать" theAction = (модель действия маршрута "saveStuff")}}

  2. вы можете добавить controllers/new.js контроллер и обработать действие там. (РЕДАКТИРОВАТЬ: Если вы беспокоитесь о нескольких контроллерах, вы можете добавить его в application контроллер controllers/application.js, и он будет обрабатывать все действия сверху, если у вас действительно есть глобальное действие (например, «выход из системы») *

  3. Вы можете обернуть все это в компонент и передать модель.

...