Best Way to Save Editing State in My Ember.js Application - html

Question

I have spent the last few days monkeying with my app, trying to figure out how best to keep track of an editing state within a given controller. Of course, the problem is, multiple of these ObjectControllers exist at one time, and only one can be editing at a given moment. Below is the important code:
App.js:
var App = Ember.Application.create();
//ROUTES
App.Router.map(function() {
this.resource('tasks', function() {
this.resource('task', {path: ':task_id'});
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('tasks');
}
});
App.TasksRoute = Ember.Route.extend({
model: function() {
return App.Task.find();
}
});
App.TaskRoute = Ember.Route.extend({});
//CONTROLLERS
App.TasksController = Ember.ArrayController.extend({
isEditing: null,
editing: false,
newTask: function() {
console.log('new task');
},
toggleEdit: function(id) {
this.set('isEditing', id);
if ($('#collapse' + this.get('isEditing')).hasClass('in')) {
this.set('editing', false);
this.set('isEditing', null);
$('.in').collapse('hide');
} else {
this.set('editing', true);
$('.in').collapse('hide');
$('#' + 'collapse' + this.get('isEditing')).collapse('toggle');
}
}
});
App.TaskController = Ember.ObjectController.extend({
needs: 'tasks',
collapseId: function() {
return "collapse" + this.get('id');
}.property('id'),
collapseHref: function() {
return "#collapse" + this.get('id');
}.property('id'),
});
//VIEWS
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
var self = this;
Ember.run.schedule('afterRender', function() {
self.$('.navbar').affix({offset: -1000});
});
}
});
//HANDLEBARS HELPERS
//STORE DEFINITION
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
/*DS.RESTAdapter.extend({
url: 'http://localhost:3000'
})*/
});
//MODELS
App.Task = DS.Model.extend({
summary: DS.attr('string'),
description: DS.attr('string'),
start: DS.attr('string'),
end: DS.attr('string'),
recurrence: DS.attr('string')
});
//FIXTURE DATA
App.Task.FIXTURES = [{
id: "q5ji9chrh1hcu05dohvrf4aumc",
summary: "Test",
description: null,
start: "2013-04-01T10:00:00-07:00",
end: "2013-04-01T11:00:00-07:00",
recurrence: "FREQ=WEEKLY;BYDAY=MO,WE,TH,FR"
}, {
id: "mm4m3pq6icbgbl6m49jpdhi8j0",
summary: "Test 2",
description: "absafdaerwer",
start: "2013-04-01",
end: "2013-04-02",
recurrence: null
}];
Home.HTML:
<!--TEMPLATES-->
<script type="text/x-handlebars">
<div class="navbar" data-spy="affix">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="tasks">
<div class="row-fluid span8 offset2 task-list">
<div class="space-top"><div>
<div class="accordion" id="accordion">
{{partial 'tasks/newTask'}}
{{#each task in controller}}
<div class="accordion-group">
{{render 'task' task}}
</div>
{{/each}}
</div>
</div>
</script>
<script type="text/x-handlebars" id="tasks/_newTask">
<div class="accordion-group">
<div class="new-task-header accordion-heading" {{action newTask on="click"}}>
<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNew">New Task...</span>
</div>
<div id="collapseNew" class="accordion-body collapse">
<div class="new-task accdion-inner">
{{#if task.description}}
<p>{{task.description}}</p>
{{else}}
<p>No description</p>
{{/if}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="task">
<div class="task">
{{#linkTo 'task' task}}
<div class="accordion-heading" {{action toggleEdit task.id on="click"}}>
<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
{{#if controllers.tasks.editing}}
editing {{task.summary}}
{{else}}
{{task.summary}}
{{/if}}
</span>
</div>
{{/linkTo}}
</div>
<div {{bindAttr id="collapseId"}} class="accordion-body collapse">
<div class="edit-task accdion-inner">
{{#if task.description}}
<p>{{task.description}}</p>
{{else}}
<p>No description</p>
{{/if}}
</div>
</div>
</script>

Answer 1

In this code, there are not multiple TaskControllers being created, I believe. Try setting itemController: 'task' on the ArrayController. (Discussed here, and if you're using 1.0.0-rc.2 see mention here.) That way you can set an editing property on that particular task (and reference tasks if needed). Does that clear anything up?