Dashboard style quick editing in Ember.js - ember.js

Question

I'm attempting to make an admin backend for my Rails app with Ember.
Here's a JsBin illustrating the problems I'm having.
http://emberjs.jsbin.com/titix/20/edit
In short, I want to be able to edit the title of a arbitrary model inside of a list of other models when a user clicks on it.
Relevant CoffeeScript with questions in the comments:
App.ItemView = Ember.View.extend
templateName: "item"
isEditing: false
didInsertElement: ->
# 1. Is there a better way to toggle the isEditing property when the title is clicked?
view = #
#$('.title').click ->
view.toggleProperty('isEditing')
# 2. How would I unset isEditing when the user clicks on a different App.ItemView?
# 3. How do I set App.ItemController to be the controller for App.ItemView?
App.ItemController = Ember.Controller.extend
# 4. How would I then toggle the isEditing property of App.ItemView on either save of cancel from App.ItemController?
actions:
save: ->
# set isEditing is false on App.ItemView
#get('model').save()
cancel: ->
# set isEditing is false on App.ItemView
#get('model').rollback()
Any help on any of these questions would be appreciated.

Answer 1

Okay, let's see if I can remember to answer all of the questions.
Firstly we decide to wrap the entire set of items in an array controller (this allows us to keep track of all of the children item controllers). It also allows us to define an itemController which the items can use.
<script type="text/x-handlebars" data-template-name="item-list">
<h3>{{view.title}}</h3>
<ul>
{{render 'items' view.content}}
</ul>
</script>
App.ItemsController = Em.ArrayController.extend({
itemController:'item',
resetChildren: function(){
this.forEach(function(item){
item.set('isEditing', false);
});
}
});
Secondly the render template is defined ({{render 'items' view.content}} will render the items template)
<script type="text/x-handlebars" data-template-name="items">
{{#each item in controller}}
<li>{{view App.ItemView content=item}}</li>
{{/each}}
</script>
Thirdly since we iterated over the controller it will use this modified item controller
App.ItemController = Ember.ObjectController.extend({
isEditing: false,
isSaving: false,
actions: {
startEditing: function(){
this.parentController.resetChildren();
this.set('isEditing', true);
},
save: function() {
var self = this;
this.set('isEditing', false);
this.set('isSaving', true);
this.get('model').save().finally(function(){
//pretend like this took time...
Em.run.later(function(){
self.set('isSaving', false);
}, 1000);
});
},
cancel: function() {
this.set('isEditing', false);
this.get('model').rollback();
}
}
});
and here's our template
<script type="text/x-handlebars" data-template-name="item">
{{#if controller.isEditing}}
{{input value=controller.title }}
<button {{ action 'cancel' }}>Cancel</button>
<button {{ action 'save' }}>Save</button>
{{else}}
<div {{action 'startEditing'}}>
<div class="title">{{controller.title}}</div>
</div>
{{/if}}
{{#if controller.isSaving}}
Saving...
{{/if}}
</script>
Example: http://emberjs.jsbin.com/jegipe/1/edit

Answer 2

Here is a working bin toggles the state of the form item in the following conditions, save button click, cancel button click and click on an another item.
Every time we click on an item, I save the item views reference to the index controller. When an other item is clicked, I use the a beforeObserver to set the previous item views state to false.
I also specified the item controller in the template.
App.IndexController = Em.ObjectController.extend({
currentEditingItem: null,
currentEditingItemWillChange: function() {
if(this.get('currentEditingItem')) {
this.set('currentEditingItem.isEditing', false);
}
}.observesBefore('currentEditingItem'),
});
App.ItemController = Ember.Controller.extend({
needs: ['index'],
formController: Em.computed.alias('controllers.index'),
currentEditingItem: Em.computed.alias('formController.currentEditingItem'),
actions: {
save: function() {
this.set('currentEditingItem.isEditing', false);
return this.get('model').save();
},
cancel: function() {
this.set('currentEditingItem.isEditing', false);
return this.get('model').rollback();
}
}
});