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

Question

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

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

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

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

Answer 1

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

Это базовый подход:

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

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

1. Там нет нет HTML элемента формы, так как он не нужен.
2. Данные не отправляются автоматически на сервер, вместо этого вы должны отправить с помощью логики javascript. Imho это преимущество, поскольку вы могли выполнять дополнительную логику до или после отправки данных на сервер.
3. Этот играет хорошо с REST-API подходы как уголек-дата или Ember-ФПЧП :-)

пример показывает форму (только концептуально, так как нет 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>