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 taskcontrollers 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 needed). clear up?


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -