title: Ember edit form template populate and update values
body: <p>The idea is to have a form populated with the current route's object properties enabling a user to update the properties and submit the changes. However, I cannot seem to access the properties in the controller, even though I can get them to show up in the template just fine. Since I am using Ember-CLI, here are the relevant files.</p>
  
  <p>I found the Ember documentation for controller discussing setting the model for the controller in the route using setupController. This however, did not work. Now I am pretty out of ideas.</p>
  
  <p>If you want to see it in a slightly more legible form, the <a href="https://github.com/knu2xs/wbs-client-web" rel="nofollow">GitHub Repo</a> is also current.</p>
  
  <p><strong>Router</strong></p>
  
  <pre><code>// router.js
  import Ember from 'ember';
  
  var Router = Ember.Router.extend({
      location: EmberWbsENV.locationType
  });
  
  Router.map(function () {
      this.route('index', { path: '/' });
      this.route('items');
      this.resource('edit', { path: 'items/:item_id/edit' });
      this.route('new', { path: 'items/new' });
  });
  
  export default Router;
  </code></pre>
  
  <p><strong>Route</strong></p>
  
  <pre><code>// routes/edit.js
  import Ember from 'ember';
  
  export default Ember.Route.extend({
      model: function(params){
          return this.store.find('item', params.item_id);
      },
      setupController: function(controller, item) {
          controller.set('model', item);
      }
  });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>// controllers/edit.js
  import Ember from 'ember';
  
  export default Ember.ObjectController.extend({
      // variables for form values
      wbsCode: this.get('model.code'),
      wbsAbbrev: this.get('model.abbrev'),
      wbsDesc: this.get('model.desc'),
      wbsIsSuffix: this.get('model.isSuffix'),
  
      actions: {
  
          // exit without changing anything
          cancel: function () {
              this.transitionToRoute('items');
          },
  
          // process new wbs item submissions
          save: function () {
  
              // set values from form to current instance model
              this.set('code', this.wbsCode);
              this.set('abbrev', this.wbsAbbrev);
              this.set('desc', this.wbsDesc);
              this.set('isSuffix', this.wbsIsSuffix);
  
              // save item instance into data store and return to items list
              this.save().then(function () {
                  this.transitionToRoute('items');
              });
  
          },
  
          // remove the current wbs item
          remove: function () {
              // TODO: create delete/remove method
              this.transitionToRoute('items');
          }
      }
  });
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>{{! templates/edit.js }}
  &lt;form class="form-horizontal" role="form"&gt;
      &lt;div class="col-sm-offset-2"&gt;
          &lt;h1&gt;Edit {{abbrev}}&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="wbs-code" class="control-label col-sm-2"&gt;Code&lt;/label&gt;
          &lt;div class="col-sm-2"&gt;
              {{input type="text" class="form-control" id="wbs-code" placeholder="C04416" tabindex="1" autofocus="true" value=wbsCode}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="wbs-short" class="control-label col-sm-2"&gt;Short Description&lt;/label&gt;
          &lt;div class="col-sm-2"&gt;
              {{input type="text" class="form-control" id="wbs-short" placeholder="ARC4" tabindex="2" value=wbsAbbrev}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="wbs-long" class="control-label col-sm-2"&gt;Long Description&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
              {{input type="text" class="form-control" id="wbs-long" tabindex="3" placeholder="ArcGIS 4: Sharing Content on the Web" value=wbsDesc}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="is-suffix" class="control-label col-sm-2"&gt;WBS code suffix&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
              {{input type='checkbox' class='glyphicon glyphicon-unchecked' id='is-suffix' tabindex='4' checked=wbsIsSuffix}}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-offset-2"&gt;
          &lt;buton type="button" {{action 'cancel'}} class="btn btn-default"&gt;
              &lt;span class="glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt; Cancel
          &lt;/buton&gt;
          &lt;button type="button" {{action 'save'}} class="btn btn-primary"&gt;
              &lt;span class="glyphicon glyphicon-save"&gt;&lt;/span&gt; Save
          &lt;/button&gt;
          &lt;button type="button" {{action 'remove'}} class="btn btn-danger"&gt;
              &lt;span class="glyphicon glyphicon-warning-sign"&gt;&lt;/span&gt; Delete
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>