How do I handle form submission in ember.js?

Question

I have a form with various controls. When the submit button is pushed an ajax request is sent to the server which answers with some json data I want to display properly. This is a one-off thing, no bindings, etc needed, the data is read-once and discarded afterwards. I can think of some ways to do this combining views and jquery but what is the proper way to do this in Ember.js?

More specifically:

1) How do I communicate the form parameters from the view to the controller that is going to handle the submission event?

2) If I were to create a route to represent the submitted form state how do I serialize the parameters into a route path that makes sense for Ember? Is that even possible?

Answer 1

Since no one answered yet, i have created a fiddle showing how i would to this.

This is the basic approach:

1. I would setup a controller with a fresh (== empty) model.
2. Use bindings to synchronize the values of form elements to the model of the controller.
3. Create a action that takes the updated model and does whatever you want with it ( this replaces the traditional form submit ).

So the approach is fundamentally different from the traditional way of handling forms this way:

1. There is no HTML form element , since it is not needed.
2. The data is not submitted automatically to the server, instead you would send/submit it manually via javascript logic . Imho this is an advantage as you could perform additional logic before or after submitting the data to the server.
3. This plays nicely with REST-API approaches like ember-date or ember-epf :-)

The example shows a form (just conceptually, as there is no HTML form element) to enter a first and last name. The entered values are synced to the model and you can can "perform a submit".

The JS code:

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"));
    }
});

The template showing the use of value bindings:

<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>