如何使用Router处理动态内容?

时间:2012-10-25 03:33:15

标签: dynamic view ember.js router

我正在开发Ember.js的应用程序,应用程序维护类别,在类别的列表视图中,我们将在用户单击“创建”按钮时动态显示新的cateogry表单。在使用Ember的路由器之前,我们使用以下机制:

查看:

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

有效。

我的问题是:

  • 这是处理动态视图的正确方法吗?我们是否需要为页面中的每个浮动层创建一个状态/控制器?
  • 即使应用仍然显示类别,网址也会被更改。
  • 模板中只有一个{{outlet}},如果要显示多个动态视图,该怎么办?

1 个答案:

答案 0 :(得分:2)

  • 对我来说这看起来很不错。对于州创建和控制器......这里没有是/否答案。通常我会说你为每个上下文逻辑创建一个控制器,并在你想要处理一个新的应用程序状态时创建一个路由。在您的示例中,您可以很好地使用类别(状态以概述所有类别),显示(显示特定类别)...

  • 这里的问题是什么?对不起:s,我不明白你想知道的是什么。

  • 答案很简单,如果您要在页面中显示多个动态视图,则可以使用多个{{outlets}},使用命名出口。见:Ember.js Router App Architecture -- How to have multiple nested view/controller pairs