Ember.js: как отправить форму?

Question

[Алексей Аристов]

Где-то видел сообщение, что ember.js "из коробки" не умеет работать с формами.
Но нашёлся какой-то такой пример:

<form class='form-inline' {{action "auth" on="submit"}}>
  <div class="form-group">
    <label for="loginField">Login</label>
    <input type="text" class="form-control" id="loginField" placeholder="" name='login'>
  </div>
  <div class="form-group">
    <label for="passwordField">Password</label>
    <input type="password" class="form-control" id="passwordField" placeholder="">
  </div>
  <button type="submit" class="btn btn-primary">Enter</button>
</form>

Добавил этот код в application.hbs → форма отрисовалась. Нажимаю Enter → вызывается функция auth из файла application.js:

export default Ember.Route.extend({
  actions: {
    auth() {
        console.log(arguments);
    },

Но arguments пусты. Как отправить данные из формы в restful api?

Действительно ли для работы с формами Ember.js обязательно требует дополнения?

Answer 1

[Станислав Романов]

Пример будет работать, так:

<form class='form-inline' {{action "auth" on="submit"}}>
  <div class="form-group">
    <label for="loginField">Login</label>
    {{input value=login type="text" class="form-control" id="loginField" placeholder="" name='login'}}
  </div>
  <div class="form-group">
    <label for="passwordField">Password</label>
    {{input value=password type="password" class="form-control" id="passwordField" placeholder=""}}
  </div>
  <button type="submit" class="btn btn-primary">Enter</button>
</form>

export default Ember.Route.extend({
  login: null,
  password: null,

  actions: {
    auth() {
        let {login, password} = this.getProperties('login', 'password');

        console.log(login, password);
    },

Как отправить данные из формы в restful api?

Зависит от способа (используемых библиотек) авторизации. Я настоятельно рекомендую посмотреть в сторону библиотеки ember-simple-auth.

Вот мой сниппет для формы регистрации:

// app\templates\registration.hbs

<div class="row align-center align-middle">
  <div class="medium-6 large-4 columns">
    <form {{action 'registration' on='submit'}} class="registration-form">
      <h3 class="text-center">Регистрация</h3>

      {{form-control label="E-mail" value=email errors=errors.email}}
      {{form-control type='password' label="Пароль" value=password errors=errors.password}}
      {{form-control type='password' label="Повторите пароль" value=password_confirmation errors=errors.password-confirmation}}

      <div class="row">
        <div class="small-4 columns">
          {{fz-button type="submit" text="Зарегистрироваться" isLoading=isLoading}}
        </div>
        <div class="small-8 columns text-right">
          {{#link-to 'login' class="button link"}}Войти{{/link-to}}
        </div>
      </div>
    </form>
  </div>
</div>

// app\controllers\registration.js

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  email: null,
  password: null,
  password_confirmation: null,
  errors: null,
  isLoading: false,

  actions: {
    registration() {
      let store = this.get('store');
      let attributes = this.getProperties('email', 'password', 'password_confirmation');
      let adapter = store.adapterFor('user');
      let url = adapter.urlForCreateRecord('user');
      let data = {
        type: 'user',
        attributes: attributes
      };

      this.set('errors', null);
      this.set('isLoading', true);

      adapter.ajax(url, "POST", { data: { data: data } })
        .then(() => {
          // Логиним пользователя сразу после регистрации
          this.get('session').authenticate('authenticator:oauth2', attributes.email, attributes.password);
        })
        .catch((payload) => {
          this.set('errors', DS.errorsArrayToHash(payload.errors));
        })
        .finally(() => {
          this.set('isLoading', false);
        });
    }
  }
});

Где form-control - компоненты приложения.

Действительно ли для работы с формами Ember.js обязательно требует дополнения?

Нет. Но с ними удобнее.

Так же для работы с bootstrap, может быть удобно использовать ember-bootstrap.

Comments

[Алексей Аристов]

Код из сниппета работает, спасибо.

Мой пример и после исправления работать не стал. И, кажется, я понял в чём дело.
Функцию auth можно добавить и в раутер, и в контроллер. И в обоих случаях она будет вызываться

actions: {
    auth() {
      console.log(this.getProperties('login', 'password'));
    }
  }

но при вызове из раутера значения login и password - это undefined, а при вызове из контроллера это значения соответствующих котролов.

[Станислав Романов]

Да, в шаблоне область видимости ограничена контроллером, но в раутере можно получить переменные из контроллера - this.controller.getProperties('login', 'password')