我正在通过 Ember.js 开发一个应用程序,该应用程序维护类别,在类别的列表视图中,当用户单击创建按钮时,我们将动态显示新的类别表单。在使用 Ember 的 Router 之前,我们使用如下机制:
看法:
LCF.CategoriesView = Ember.View.extend({
templateName:'admin/app/templates/categories/list',
isNewVisible:false,
showNew:function () {
this.set('isNewVisible', true);
},
hideNew:function () {
this.set('isNewVisible', false);
}
});
模板:
<div class="well well-small">
<a class="btn btn-primary" href="#" {{action "showNewCategory"}}>Create</a>
</div>
{{#if view.isNewVisible}}
{{view LCF.NewCategoryView}}
{{/if}}
使用路由器后,事件将由路由处理,我将代码更改如下:
路由器:
categories:Em.Route.extend({
route:'/categories',
connectOutlets:function (router, context) {
router.get('applicationController').connectOutlet('categories', router.get('store').findAll(LCF.Category));
},
showNewCategory:function (router) {
router.transitionTo('categories.newCategory', {});
},
index:Ember.Route.extend({
route:'/'
}),
newCategory:Em.Route.extend({
route:'/new',
cancelEdit:function (router) {
router.transitionTo('categories.index');
},
connectOutlets:function (router, context) {
router.get('categoriesController').connectOutlet('editCategory', {});
router.get('editCategoryController').enterEditing();
}
})
模板:
<div class="well well-small">
<a class="btn btn-primary" href="#" {{action "showNewCategory"}}>Create</a>
</div>
{{outlet}}
有用。
我的问题是:
- 这是处理动态视图的正确方法吗?我们是否需要为页面中的每个浮动层创建一个状态/控制器?
- 即使应用程序仍显示类别,URL 也会更改。
- 模板中只有一个{{outlet}},如果要显示多个动态视图,怎么办?