Creating an object with an HTML form

Ember Data
1

Hi,

I’ve been a backend developer for many years (mostly with Rails) and I want to take a shot at front-end application development with Ember.

I want to build an app with a very simple form (3 fields) to create records in the local storage database. The code is on GitHub

I’ve got the base UI figured out but I don’t understand how to wire my form with EmberData to store the values in the database (reading pre-stored data is OK though).

I’ve read most of the official guides but I didn’t find anything related to object creation via forms. I’ve also looked at the TodoMVC app, but it is a single field input and I could figure out how to expand this to a more complex object.

Any help or pointer to interesting resources would be great. Thanks.

2

Hi,

Assuming that you are using ember-cli, you could use following:

Form: new.hbs

`

<form {{action 'save' on="submit"}}>
{{input value=name placeholder="Your Name"}}
{{input value=email placeholder="Your Email"}}
{{input value=password placeholder="Your Password"}}
<button type="submit">Create Account</button>
</form>

`

Route: new.js

`

export default Ember.Route.extend({
  model: function() { this.store.createRecord('account'); }
});

`

Controller: new.js

`

export default Ember.ObjectController.extend({
  actions: {
    save: function() {
      var account = this.get('model');
      account.save().then(successFn, failureFn);
      // You need to implement successFn and FailureFn
     }
  }
});

`

1 Like
3

transistionTo can also wait for account.save(). See:

1 Like
4

Thanks guys,

I was no aware of ember-cli, so i’ve tried to rebuild my app with it. Wow, so much more boilerplate ! but I can see how it will help me in the end.

I’ve copied you example code but it doesn’t do anything yet. I keep digging and will report as soon as I have something.

Many thanks.

Edit : I’ve made another GitHub repository with this attempt using Ember-CLI : https://github.com/jlecour/home-stats-front