getting back reference to a specific model using Ember's Array Controller

Question

I'm new to Ember and am finding some of their concepts a bit opaque. I have a app that manages inventory for a company. There is a screen that lists the entirety of their inventory and allows them to edit each inventory item. The text fields are disabled by default and I want to have an 'edit item' button that will set disabled / true to disabled / false. I have created the following which renders out correctly:

Inv.InventoryitemsRoute = Ember.Route.extend({
      model: function(params) {
            return Ember.$.getJSON("/arc/v1/api/inventory_items/" + params.location_id);
    }

<script type="text/x-handlebars" data-template-name="inventoryitems">
    {{#each}}
      <div class='row'>
          <p>{{input type="text" value=header disabled="true"}}</p>
          <p>{{input type="text" value=detail disabled="true"}}</p>
          <button {{action "editInventoryItem" data-id=id}}>edit item</button>
          <button {{action "saveInventoryItem" data-id=id}}>save item</button>
       </div>
    {{/each}}
</script>

So this renders in the UI fine but I am not sure how to access the specific model to change the text input from disabled/true to disabled/false. If I were just doing this as normal jQuery, I would add the id value of that specific model and place an id in the text input so that I could set the textfield. Based upon reading through docs, it seems like I would want a controller - would I want an ArrayController for this model instance or could Ember figure that out on its own?

I'm thinking I want to do something like the following but alerting the id give me undefined:

Inv.InventoryitemsController=Ember.ArrayController.extend({
    isEditing: false,

    actions: {
        editInventoryItem: function(){
          var model = this.get('model');  
          /*
          ^^^^
          should this be a reference to that specific instance of a single model or the list of models provided by the InventoryitemsRoute
          */
          alert('you want to edit this:' + model.id);  // <-undefined
        }
    }
});

In the Ember docs, they use a playlist example (here: http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/) like this:

App.SongsRoute = Ember.Route.extend({
  setupController: function(controller, playlist) {
    controller.set('model', playlist.get('songs'));
  }
});

But this example is a bit confusing (for a couple of reasons) but in this particular case - how would I map their concept of playlist to me trying to edit a single inventory item?

fanta fanta · Accepted Answer · 2014-02-18T16:32:12

Ok, that's because as you said, you're just starting with Ember. I would probably do this:

<script type="text/x-handlebars" data-template-name="inventoryitems">
  {{#each}}
    <div class='row'>
      <p>{{input type="text" value=header disabled=headerEnabled}}</p>
      <p>{{input type="text" value=detail disabled=detailEnabled}}</p>
      <button {{action "editInventoryItem"}}>edit item</button>
      <button {{action "saveInventoryItem"}}>save item</button>
    </div>
  {{/each}}
</script>

with this, you need to define a headerEnabled property in the InventoryitemController(Note that it is singular, not the one that contains all the items), and the same for detailEnabled, and the actions, you can define them also either in the same controller or in the route:

App.InventoryitemController = Ember.ObjectController.extend({
  headerEnabled: false,
  detailEnabled: false,

  actions: {
    editInventoryItem: function() {
      this.set('headerEnabled', true);
      this.set('detailEnabled', true);
    }
  }
});

that's just an example how you can access the data, in case the same property will enable both text fields, then you only need one, instead of the two that I put . In case the 'each' loop doesn't pick up the right controller, just specify itemController.

getting back reference to a specific model using Ember's Array Controller

2 Answers