EmberJS路由复用:编辑并创建新模型

EmberJS Route reuse: edit and create new model

本文关键字:新模型 模型 创建 路由 复用 编辑 EmberJS      更新时间:2023-09-26

我正在开发一个EmberJS应用程序,我开始重新考虑我的路由器映射。我的应用程序处理orders。每一阶包含detailscostsdimensions。我希望每个页面都是可寻址的。我从定义这些路由开始开发:

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路由有不同的控制器。我所做的是在每个嵌套路由的模型钩子中的this.modelFor('order');。尽管如此,有时我觉得我需要在路由之间共享一些东西,因为它们都使用相同的模型(Order),它们只是在不同的部分上工作。

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

可能因为"order"是一种资源,而不是一条简单的路线。你会如何解决这个问题?

你能不能这样做:

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