Ember.JS создает запись в компоненте и добавляет в локальное хранилище данных или передовое решение

this.store существует в элементах, в которые оно было введено по умолчанию (контроллеры и маршруты), и, вероятно, его не следует использовать, поскольку оно пропускает геттеры, которые являются неотъемлемой частью Ember.

Правильный способ доступа к нему в компоненте (при условии, что вы его ввели) через:

this.get('store')

Из множества исследований я обнаружил, что взаимодействие с магазином лучше всего осуществлять через основной маршрут.

Вы, вероятно, захотите (по крайней мере, в большинстве случаев) получить доступ к данным хранилища не на основном маршруте, а в контроллере, в котором существует ваш компонент, а затем просто передать данные в компонент.

На это есть несколько причин:

• Маршруты в основном используются для получения данных и управления механизмом маршрутизации вашего приложения, куда переходит пользователь, в каких точках происходит переход и почему и т. д. Маршруты не должны контролировать, какие данные отображаются и как, только как/когда его получили.
• Контроллеры в основном используются для обработки данных, подготовки, преобразования и т. д. Сюда входят такие вещи, как фильтрация данных, их сортировка, извлечение подмножества и т. д.
• Данные контроллера доступны непосредственно в шаблонах, а данные маршрута — нет.

Хук setupController() в Ember.Route фактически делает это по умолчанию. .

Это операция по умолчанию, выполняемая в хуке setupController():

set(controller, 'model', model);

Таким образом, ваш контроллер по умолчанию имеет доступ к модели и может затем передать ее компонентам.

Таким образом вы четко отделяете логику, которая извлекает/получает/обрабатывает данные, от логики, которая их отображает.

Я прикрепляю прослушиватели событий к кнопке в моем компонентном файле HBS. Одна из кнопок вызовет два каскадных, но легких вызова ajax. Ответ от последнего из этих вызовов ajax определит, должен ли я создавать записи или нет.

Естественный способ сделать это в Ember — прикрепить действие к вашей кнопке, которое будет просто распространяться на контроллер.

// inside components/example.js
// ...
actions: {
  myButtonAction() {
    // call the controller action
    this.get('controllerActionThatWasPassedIn')(/* pass any data if necessary */);
  }
}

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

// controllers/example.js
// ...
actions: {
  handleData(someArgs) {
    this.get('store)'.findSomething(someArgs).then((result) => {
      this.set('result', result); // set the result which will automatically be passed down into the component
    });
  }
}

// templates/example.hbs
{{my-component result=result
               controllerActionThatWasPassedIn=(action "handleData")
}}

В Ember эта концепция называется Данные. вниз, Действия вверх.

Действия, переданные таким образом, называются закрытием. действия, и, на самом деле, вы также можете return из них, поэтому что-то вроде этого также будет работать:

// inside components/example.js
// ...
actions: {
  myButtonAction() {
    // call the controller action
    this.get('controllerActionThatWasPassedIn')(/* pass any data if necessary */)
      .then((result) => {
        // do stuff with result
      });
  }
}

Как мне прикрепить прослушиватели событий к виджету jquery компонента из маршрута?

Примечание: анти-шаблон

В Ember нет естественного способа сделать это, в основном потому, что маршруты и контроллеры создаются до того, как что-либо будет отрисовано. Вот почему вы не хотели бы делать это в маршруте и в контроллере.

Однако, если вам, возможно, не нужен контроллер и вы хотите только выполнить какую-то быструю/небольшую операцию DOM в маршруте (обратите внимание, что это обычно анти-шаблон), вы всегда можете использовать Ember Run Loop перехватывает и планирует выполнение некоторых операций после рендеринга:

export default Ember.Route.extend({
  init() {
    this._super(...arguments);

    Ember.run.scheduleOnce('afterRender', () => {
      $('.my-component').click(/* ... */)
    });
  }
});

Или вы можете сделать это непосредственно в хуке renderTemplate() после того, как вы визуализировать содержимое:

renderTemplate() {
  this.render();
  $('.my-component').click(/* ... */); // Probably shouldn't do this though
}