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

我的Ember.Router不断增长，看起来它很快就会保持超过三十个URL路线。现在，很多这些路线都做同样的事情，例如连接一个头部插座（可能占所有情况的80％）。避免Ember.Router中的代码重复？

有没有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()); 
     } 
    }) 
    }) 
});

来源

2012-11-16 kraftwer1

您可以添加的jsfiddle或一些代码，你的问题？ – zentralmaschine

你走了... – kraftwer1

只是一个想法。我还没有实际测试过，但我相信的东西类似这是可行的

// 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()); 
      } 
     }) 
     ... 
    }) 
})

不知道这是否会实际工作;就像我说的这只是一个基于假设的想法

来源

2012-11-16 14:33:10 MilkyWayJoe

这看起来很有趣，谢谢。我会看看它，同时看看其他人是否也有办法... – kraftwer1

我相信你会找到更好的方法，这只是一个随机的想法:)无论如何，让我们知道什么你会解决的，因为这是我必须要做的，直到现在我还没有想过：P – MilkyWayJoe

好吧，我会这样做的！ – kraftwer1

也许另一种方法可能是使用嵌套路线。在这里据我所知，物品连接header插座，而帖子连接帖子outlet。为了去posts路线，我假设你首先必须去物品路线。（IE /条/个）也就是说beeing说，路由器将是这样的：

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()); 
     } 
    }) 
    }) 
});

来源

2012-11-16 18:34:45

如果OP实际上是通过文章，然后发布文章，这将是一个更好的方法。我已经这样做了几次，但我不知道，我倾向于将事情扩展到我自己的微库中并从那里开始工作。但如果这是真的（/ articles/posts），那么这可能是最好的方法 – MilkyWayJoe

是的你是对的，他可以选择更适合他的东西。这实际上是一个应用程序是如何根据状态进行设计的问题。基本上我会说如果帖子与一篇文章相关，那么嵌套的路线是好的，否则你的解决方案可能会更好。 –

我甚至不确定这个'解决方案'是否可行，这只是一个想法..我认为我有时会使用继承方式：P – MilkyWayJoe

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

回答

相关问题