how to add a new record UI in ember

Question

Just when I think that I'm getting a handle on ember, this happens and I run into a brick wall.

I have

App.Router.map(function() {

this.resource('customers', function() {
    this.resource('customer', {
        path : ':customer_id'
    });

customers route :

App.CustomersRoute = Ember.Route.extend({
model: function() {
    return this.store.find('customer');
},

customer controller :

App.CustomerController = Em.ObjectController.extend({
needs: ['state'],
isEditing: false,
isNotEditing: Ember.computed.not('isEditing'),

actions : {

    startEditing: function() {
        this.set('isEditing',true);
        this.set('validationErrors', '');
    },

    save: function() {

and these templates :

<script type="text/x-handlebars" data-template-name="customers">
 ...
 {{outlet}}
  ...
</script>

<script type="text/x-handlebars" data-template-name="customer">
...
{{#if isEditing}}
        <div class="well well-sm">
            <a class="btn btn-success" {{action save}}>Save</a>
            <a class="btn btn-warning" {{action cancel}}>Cancel</a>
        </div>
      {{else}}
        <div class="well well-sm">
            <a class="btn btn-primary" {{action startEditing}}>Edit</a>
            <a class="btn btn-danger" {{action delete}}>Remove</a>
        </div>
{{/if}}

this is all working well for me. I can select a customer, press the edit button, form inputs get enabled, press the save button and changed data is persistent back to the db

however : this is my brick wall.

How do I enable a feature to create a new record : I dont want to duplicate the edit form, just show blanks

I am assuming that I need to put "new" into the router map

this.resource('customers', function() {
  this.resource('customer', {
path : ':customer_id'
});

route('new');
 });

but do I create a CustomerNew controller and CustomerNew route and CustomerNew template ?

I have put an action into the customers controller

<a class="btn btn-primary btn-xs pull-right" {{action startNew}}>New</a>

do I really need to create a route & controller & template just to handle the new action ? Or can I reuse the customer/1 route/controller/template ?

thanks

Jeremy Green Jeremy Green · Accepted Answer · 2013-09-14T21:13:01

To do things The Ember Way (TM) you'd want to use a new route, controller, and template. Ember does make it easy to consolidate your logic and not have to duplicate code. In templates you can do this with partial, and in your JS code you can do it with Ember.Mixin.

Here's a JSBin of the general idea : http://jsbin.com/ucanam/1056/edit

Here's the interesting parts of the templates :

  <script type="text/x-handlebars" data-template-name="customers/new">
    Add a new customer<br/>
    {{partial "customers/form"}}
  </script>
  <script type="text/x-handlebars" data-template-name="customer/edit">
    Edit a customer<br/>
    {{partial "customers/form"}}
  </script>
  <script type="text/x-handlebars" data-template-name="customers/_form">
    {{input value=name}}
    <button {{action save}}>Save</button>
    <button {{action cancel}}>Cancel</button>
  </script>

And then the controllers :

App.CrudController = Ember.Mixin.create({
  actions : {
    save : function(){
      this.get('model').save();
      this.transitionToRoute('customers');
    },
    cancel : function(){
      this.get('model').rollback();
      this.transitionToRoute('customers');
    }
  }
});

App.CustomersNewController = Ember.ObjectController.extend(App.CrudController,{});

App.CustomerEditController = Ember.ObjectController.extend(App.CrudController,{});

how to add a new record UI in ember

1 Answers