CODEWITHSUNDEEP
javascriptjqueryember.js
kliron
kliron

Reputation: 4663

How do I handle form submission in ember.js?

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?

Upvotes: 25

Views: 26787

Answers (1)

mavilein
mavilein

Reputation: 11668

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>

Upvotes: 36

Related Questions