Submitting forms with Ember-data

Ember Data
1

Hi

I’m very new to Ember and Ember-data. I have done some tutorials but now I want to try something on my own. Most tutorials don’t use ember-data and ember-cli though so I have some questions. Specifically about form submission.

How are you supposed to do it? Create an object and bind the attributes to the input fields and have the bindings “synk” the data?

I tried this (I use ember-cli):

// app/models/board.js
import DS from 'ember-data';

export default DS.Model.extend({
  owner: DS.attr('string'),
  repo_name: DS.attr('string')
});

// app/routes/boards.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('board');
  }
});

// app/templates/boards/new.hbs
<div class="row">
  <div class="col-md-4 pull-right">
    <form {{action "submitBoard" on="submit"}} class="form-inline pull-right">
      <div class="form-group">
        {{input value=board.owner class="form-control" placeholder="Owner"}}
      </div>
      <div class="form-group">
        {{input value=board.repo_name class="form-control" placeholder="Repo name"}}
      </div>
      <button class="btn btn-primary" {{action "submitBoard"}}>Create board</button>
    </form>
  </div>
</div>
<hr>

// app/controllers/boards.js
import Ember from 'ember';

export default Ember.ArrayController.extend({
  init: function() {
    this.set('board', Ember.Object.create());
  },
  actions: {
    submitBoard: function() {
      console.log("Owner:", this.get('board.owner'));
      console.log("Repo:", this.get('board.repo_name')); 
      alert("New Board!");
    }
  }
});

The boards/new template is rendered in app/templates/boards.hbs using {{ render 'boards/new' }}.

However, this does not work. In the controller, in the submitBoard action this.get('board.owner') is undefined.

So, how are you supposed to do it? It seems to be hard to do such a simple thing in Ember so I feel I’m missing something :smile:

1 Like
2

Ok, so I created a separat new route under boards and a new controller.

// app/controllers/boards/new.js
import Ember from 'ember';

export default Ember.Controller.extend({
  board: function() {
    return this.store.createRecord('board');
  }.property(),
  actions: {
    submitBoard: function() {
      this.get('board').save().then(function() {
        this.transitionToRoute('boards.index');
      }.bind(this));
    }
  }
});

This works. I also noticed that I can do this as well:

// app/controllers/boards/new.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    submitBoard: function() {
      this.createRecord('board', { owner: this.get('owner'), repo_name: this.get('repo_name')}).save().then(function() {
        this.transitionToRoute('boards.index');
      }.bind(this));
    }
  }
});

But I guess the first way, with data bindings is a more “ember way” of doing things?

Also, should I do all this in the controller? Or is it better to handle it via the route? If so, what would that look like?

3

You didn’t mention how to access the values of a form element. For example, how to select a value of text field inside a form using a component.

And also, how to do the same form action handling using components instead of controllers. Can you elaborate?