Question

我的Ember.Router成长并且看起来它很快会维持超过30个URL路由。现在，很多这些路线都做同样的事情，例如连接一个标题出口（可能占所有情况的80％）。

是否有Ember.js方式来避免这些冗余？或者我应该将重复的部分移动到一个函数中并调用它？

更新

如您所见，有三种不同的路线（文章，帖子和用户）。其中两个连接标题出口，而第三个没有。现在想象一下，将有25条连接标题出口的路线，而没有连接标题出口的5条路线。我怎样才能避免这些重复？

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    articles: Em.Route.extend({
      route: "/articles",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet(articles, App.Article.find());
      }
    }),
    posts: Em.Route.extend({
      route: "/posts",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet("posts", App.Post.find());
      }
    }),
    users: Em.Route.extend({
      route: "/users",
      connectOutlets: function(router) {
        // Don't connect the header here!
        router.get("applicationController").connectOutlet("users", App.User.find());
      }
    })
  })
});

Answer 1

只是一个想法..我实际上没有测试过，但我认为类似这个是可行的

// some custom route
var CommonRouteOrSomething = Em.Route.extend({
    route: "/",
    connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
    }
})

App.Router = Em.Router.extend({
    root: Em.Route.extend({
        articles: CommonRouteOrSomething.extend({
            route: '/articles', // override route string
            connectOutlets: function(router) {
                // your other outlet will be connected on the super class
                this._super(router); 
                // then your actual outlet
                router.get("applicationController")
                      .connectOutlet(articles, App.Article.find());
            }
        })
        ...
     })
 })

不确定这是否真的有效;就像我说的那样，这只是一个基于假设的想法

Answer 2

也许另一种方法可能是使用嵌套路由。据我所知，文章连接header插座，帖子连接帖子outlet。为了进入posts路线，我假设你首先必须去文章路线。（即/文章/帖子）有人说，路由器看起来像这样：

App.Router = Em.Router.extend({
  root: Em.Route.extend({
    articles: Em.Route.extend({
      route: "/articles",
      connectOutlets: function(router) {
        router.get("applicationController").connectOutlet("header", "header");
        router.get("applicationController").connectOutlet(articles, App.Article.find());
      }, 

      posts: Em.Route.extend({
        route: "/posts",
        connectOutlets: function(router) {
          router.get("applicationController").connectOutlet("posts", App.Post.find());
        }
      }),
    }),

    users: Em.Route.extend({
      route: "/users",
      connectOutlets: function(router) {
    // Don't connect the header here!
        router.get("applicationController").connectOutlet("users", App.User.find());
      }
    })
  })
});

避免Ember.Router中的代码重复？

2 个答案: