Skip to main content
 首页 » 编程设计

javascript之EmberJS路由复用: edit and create new model

2024年06月03日11jackei

我正在开发一个 EmberJS 应用程序,并且我开始重新考虑我的路由器映射。 我的应用程序处理订单。每个订单都包含其详细信息成本尺寸。 我希望每个页面都是可寻址的。我开始使用定义的这些路线进行开发:

App.Router.map(function() { 
    this.route('index', {path : '/'}); 
    this.route('dashboard'); 
    this.route('reports'); 
    this.resource('orders', function() { 
        this.route('index', {path : '/'}); 
        this.resource('order', { path: '/:order_id' }, function(){ 
          this.route('index', {path : '/'}); 
          this.route('costs'); 
          this.route('dimensions'); 
          this.resource('work', { path: '/works/:work_id' }, function(){ 
              this.route('index', {path : '/'}); 
          }); 
        }); 
    }); 
}); 

这工作得非常好。 我的 URL 如下:/orders 用于订单列表,/orders/1 用于一般订单详细信息,/orders/1/costs /orders/dimensions 分别表示订单成本和尺寸。

虽然它可以工作,但我还是做了一些额外的工作,因为每个嵌套的 order 路由都有不同的 Controller 。我所做的是每个嵌套路由的模型 Hook 中的 this.modelFor('order'); 。尽管如此,有时我感觉我需要在路线之间共享一些东西,因为它们都使用相同的模型(订单),它们只是在它的不同部分工作。

当我想添加“创建订单”功能时,问题开始出现。 我希望 URL /orders/new 创建一个新订单并开始编辑它。同样,/orders/new/dimensions 仍然适用。换句话说,唯一改变的是静态 new 路径的路由 :id 参数的顺序。我之前开发的模板和 Controller 可以重复使用,但我找不到任何方法来做到这一点。

也许是因为“订单”是一种资源,而不是一条简单的路线。 您将如何解决这个问题?

请您参考如下方法:

你能做这样的事情吗:

App.Router.map(function() { 
    this.resource('orders', function() { 
        this.route('new', {path : '/orders/new'}); 
        ... 
    }); 
}); 
 
App.OrdersNewRoute = Ember.Route.extend({ 
  redirect: function() { 
    this.transitionTo('order', App.Order.createRecord()); 
  } 
})