dynamic - Router如何处理动态内容？

Question

我正在使用Ember.js开发一个应用程序，该应用程序维护类别，在类别 ListView 中，当用户单击创建按钮时，我们将动态显示新的类别表单。在使用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}}

使用router后，事件将由路由处理，我将代码更改如下:

路由器:

    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}}

它有效。

我的问题是:

• 这是处理动态 View 的正确方法吗？我们需要为页面中的每个 float 层创建一个状态/ Controller 吗？
• 即使应用仍显示类别，网址也会发生变化。
• 模板中只有一个{{outlet}}，如果有多个动态 View 要显示，怎么办？

Answer 1

• 对我来说，这看起来相当不错。对于状态创建和 Controller ......这里没有是/否的答案。通常我会说您为每个上下文逻辑创建一个 Controller ，并且当您想要处理新的应用程序状态时创建一个路由。在您的示例中，您做得很好，包括类别(说明所有类别的概述)、显示(显示特定类别)...

• 这里有什么问题吗？抱歉:s，我不明白您想在这里了解什么。

• 这里的答案很简单，如果你有多个动态 View 要在页面中显示，你可以使用多个{{outlets}}，使用命名的outlet。请参阅:Ember.js Router App Architecture -- How to have multiple nested view/controller pairs