Where should view/state logic live in Ember?

Question

I'm working on an Ember app and am having a hard time understanding where logic should go for a feature I'm building. The feature is this, we're displaying a list of items whose title can be edited. The desired effect is that the area where the text is displayed is by default a <p> tag, but when the edit button is clicked the title becomes a text field so the user can edit the title and save it.

This is the template currently for the title,

{{#if track.isBeingEdited}}
  {{ input value=track.title }}
{{else}}
  {{ track.title }}
{{/if}}

I'm thinking of having the button like this,

{{#if track.isBeingEdited}}
  <button {{action updateTitle}}>Save Title</button>
{{else}}
  <button {{action toggleEditState}}>Edit Title</button>
{{/if}}

Currently the model has isBeingEdited property that is set to false by default. I was thinking of having the actions be in the controller, which would change the value of the model's isBeingEdited property to true, or back to false and trigger a save for the new title.

I'm uncertain if isBeingEdited should be in the controller, which is an Ember.ArrayController. Also, should the action of clicking on a button and toggling the <p> tag to a textarea be in the controller or should I create a component instead?

Asgaroth Asgaroth · Accepted Answer · 2015-01-15T15:27:14

You probably need an itemController (see docs)

then you can have your isBeingEdited on that item controller, and the actions to toggle between displaying and editing a single track would go there too.

The actions to save the model would go on the route

Where should view/state logic live in Ember?

1 Answers