html - Best Way to Save Editing State in My Ember.js Application -
i have spent last few days monkeying app, trying figure out how best keep track of editing state within given controller. of course, problem is, multiple of these objectcontrollers exist @ 1 time, , 1 can editing @ given moment. below 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>
in code, there not multiple taskcontroller
s being created, believe. try setting itemcontroller: 'task'
on arraycontroller
. (discussed here, , if you're using 1.0.0-rc.2
see mention here.) way can set editing
property on particular task (and reference tasks
if need
ed). clear up?
Comments
Post a Comment