EMBER WORKSHOP: Actions

by jdcravens

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.12/ember-data.js"></script>
<script type="text/x-handlebars">
  <div class="container">
    <form {{action "updateUser" on="submit"}}>
      <h2>Create User</h2>
      <div class="form-group">
        <label for='name'>Name</label>
        {{input value=name id='name' class="form-control"}}
      </div>

      <div class="form-group">
        <label for='email'>Email</label>
        {{input value=email id='email' class="form-control"}}
      </div>

      <div class="form-group">
        <label for='password'>Password</label>
        {{input type="password" value=password id='password' class="form-control"}}
      </div>

      <div class="form-group">
        <label for='password-confirmation'>Password confirmation</label>
        {{input type="password" value=passwordConfirmation id='password-confirmation' class="form-control"}}
      </div>

      <button class="btn btn-primary btn-block" type="submit">Save</button>
    </form>
  </div>
</script>

JavaScript

App = Em.Application.create();

App.ApplicationAdapter = DS.ActiveModelAdapter.extend();

App.ApplicationRoute = Em.Route.extend({
  model: function() {
    return this.store.createRecord('user');
  },
  actions: {
    updateUser: function() {
      return alert("Updating user " + (this.currentModel.get('name')));
    }
  }
});

App.User = DS.Model.extend({
  name: DS.attr('string'),
  email: DS.attr('string'),
  password: DS.attr('string'),
  passwordConfirmation: DS.attr('string')
});