Подтвердить что ты не робот

Как обрабатывать отправку формы в ember.js?

У меня есть форма с различными элементами управления. Когда кнопка отправки нажата, на сервер отправляется запрос ajax, который отвечает некоторыми данными json, которые я хочу отобразить правильно. Это одноразовая вещь, никаких привязок и т.д., Данные считываются один раз и затем отбрасываются. Я могу придумать некоторые способы сделать это, комбинируя представления и jquery, но что такое правильный способ сделать это в Ember.js?

Более конкретно:

1) Как мне передать параметры формы из представления в контроллер, который будет обрабатывать событие отправки?

2) Если бы я должен был создать маршрут для представления представленного состояния формы, как я сериализую параметры в маршрут, который имеет смысл для Ember? Возможно ли это?

4b9b3361

ОТВЕТЫ

Ответ 1

Поскольку никто еще не ответил, я создал fiddle, показывающий, как я это сделал бы.

Это основной подход:

  • Я бы установил контроллер со свежей (== пустой) моделью.
  • Используйте привязки, чтобы синхронизировать значения элементов формы с моделью контроллера.
  • Создайте действие, которое берет обновленную модель и делает с ней все, что вам нужно (это заменяет традиционную форму submit).

Таким образом, подход принципиально отличается от традиционного способа обработки форм таким образом:

  • элемент HTML отсутствует, поскольку он не нужен.
  • Данные автоматически не отправляются на сервер, вместо этого вы отправляете/отправляете его вручную с помощью javascript-логики. Imho это преимущество, поскольку вы могли выполнять дополнительную логику до или после отправки данных на сервер.
  • Этот отлично работает с подходами REST-API, такими как ember-date или ember-epf: -)

В примере показана форма (просто концептуально, так как нет элемента HTML-формы) для ввода имени и фамилии. Введенные значения синхронизируются с моделью, и вы можете "выполнить отправку".

Код JS:

App = Ember.Application.create({});

App.Person = Ember.Object.extend({
    firstName : "",
    lastName : ""
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return App.Person.create()
  },
    setupController : function(controller, model){
        controller.set("model", model);
    }
});

App.IndexController = Ember.ObjectController.extend({
    submitAction : function(){
        // here you could perform your actions like persisting to the server or so
        alert("now we can submit the model:" + this.get("model"));
    }
});

Шаблон, показывающий использование привязок значений:

<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  {{input valueBinding="model.firstName"}}
  {{input valueBinding="model.lastName"}}
    <button {{action submitAction target="controller"}}>Pseudo Submit</button>
  <p>{{model.firstName}} - {{model.lastName}}</p>
</script>