0
我花了几天时间和我的应用程序一起瞎猜,试图弄清楚如何最好地跟踪给定控制器中的编辑状态。当然,问题是,这些ObjectController中有多个是同时存在的,只有一个可以在给定的时刻进行编辑。下面是重要的代码:在我的Ember.js应用程序中保存编辑状态的最佳方式
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>
这绝对有帮助;两个后续问题。 1)我的问题是我只想让一个'任务'控制器在任何时候都具有编辑功能。有没有什么方法可以使用你所说的来确保这一切始终如此? 2)根据[here](http://emberjs.com/guides/controllers/dependencies-between-controllers/)指南,您可以使用'controllers.'表示法在子控制器内访问父控制器,但是当我尝试过,它不起作用。我解释错了吗? – 2013-04-05 23:43:44
@BradRoss 2 - 你可以在你的模板中使用'controllers.task',在你的控制器中你必须使用'this.get('controllers.task')' – Thomas 2013-04-08 08:46:29
(1)嗯,你可以设置一个'编辑在TasksController上的属性,看起来像'this.someProperty('editing');'在这个基础上你可以隐藏所有其他任务的编辑选项。或者更接近你想要的是'editingTask'属性设置为'this.findProperty('editing')',你可以在编辑操作中检索并设置'编辑'为false?或者更简单地说:在任务上执行'this.get('controllers.tasks')。setEach('editing',false)'。希望有所帮助 - 不确定是否有更好的方法 – dechov 2013-04-09 16:54:04