我正在使用 Ember-CLI 开发一个待办事项类型的项目。我使用漂亮的 todoMVC 项目作为起点,但使用本指南使用 Ember-CLI 构建:
http://blaketv.com/2014/10/03/ember-cli-todo-mvc-tutorial-0-0-47//
我的问题是,我将如何在父级别添加项目。所以我们会有一个主从类型的界面,在侧边栏中我们会有项目,你可以 CRUD 项目名称,然后当你单击项目名称时,你会在详细信息窗格中看到待办事项。
我已经对模型的 hasMany 关系进行了足够多的定义,但我无法确定是否需要多个 {{outlets}} 将所有内容都放在同一页面上并正常工作是非常困难的。
这是我的项目模型:
export default DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean'),
description: DS.attr('string'),
todos: DS.hasMany('todo', {async: true})
});
和待办事项模型:
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
和主路由器:
Router.map(function() {
this.resource('projects', function () {
this.route('new');
this.resource('project', { path: ':id' }, function () {
this.route('todos');
});
});
});
项目路线:
export default Ember.Route.extend({
model: function(params) {
return this.store.find('project', params.id);
}
});
索引路线:
export default Ember.Route.extend({
model: function() {
return this.store.find('project');
}
});
托多斯路线:
export default Ember.Route.extend({
model: function() {
return this.modelFor('todos');
}
});
所以对于 project.hbs 来说,这就是它变得棘手的地方。我用 bootsrap 创建了侧边栏,然后这个插座显示了待办事项......
<div class="projects-column col-md-3">
<div id="inbox-header"><span class="glyphicon glyphicon-inbox"></span> Inbox <span class="badge">42</span></div>
<div id="projects-header"><span class="glyphicon glyphicon-list-alt"></span> Projects</div>
<div id="forecast-header"><span class="glyphicon glyphicon-calendar"></span> Forecast</div>
<div id="log-header"><span class="glyphicon glyphicon-book"></span> Sessions Log</div>
</div>
<div>{{outlet}}</div>
索引.hbs:
<ul>
{{#each model}}
<li>{{link-to title "project.todos" this}}</li>
{{/each}}
所以上面这个当你点击项目标题链接时,它显示了相关的待办事项......但它呈现在左窗格中......它可能只是关于 CSS 布局的东西......但有些东西告诉我有一个非常我缺少的 Ember-ish 方式来做到这一点。
然后在/project/todo.hbs
我们有迭代
{{#each model.todos}}
<li>{{title}}</li>
{{/each}}
我什至还没有真正解决为控制器或任何东西制作 CRUD 的问题。以上很可能是可笑的,并且有一种更优雅的方法来解决这个问题......
基本上我想要一个项目父路由,我用它来执行 CRUD...然后当您在侧边栏中呈现项目链接列表并单击一个时,您会在右侧窗格中看到呈现的 ToDoMVC 工作应用程序。
当然,这只是我申请的一个起点。如果有人想出一个优雅的方法来做到这一点,我们很可能可以把它变成 github 上的一个开源项目,供其他人学习。
我认为一群新兴的 ember 开发人员很难处理这种类型的事情,因为有多种方法可以做到这一点(出口、部分、渲染、渲染到其他模板、视图、组件等)
真不知道怎么走得更远。