在我的Ember.js應用程序中保存編輯狀態的最佳方式

Question

我花了幾天時間和我的應用程序一起瞎猜，試圖弄清楚如何最好地跟蹤給定控制器中的編輯狀態。當然，問題是，這些ObjectController中有多個是同時存在的，只有一個可以在給定的時刻進行編輯。下面是重要的代碼：

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

在這段代碼中，有沒有多創建TaskController S，I相信。嘗試在ArrayController上設置itemController: 'task'。 （討論here，如果您使用1.0.0-rc.2請參閱提及here。）這樣，您可以在該特定任務上設置editing屬性（如果need已編輯，則參考tasks）。這是否清除了什麼？