更新（解决方案）

Question

我的UI布局是一个列表（插座“子导航”）/详细信息（插座“插座”），如one of my previous questions中所述。

细节有时包含模型的只读版本，有时会在主插座中呈现“编辑”数据版本。

Ember page layout

我的路由器资源之一是嵌套资源：

App.Router.map(function () {
    // ...
    this.resource('offers', function () {
       this.resource('offer', { path: '/:offer_id' }, function() {
               this.route('edit');
           });      
    });
    // ...
});

在列出路线的源代码之前，让我解释一下我的问题。

一切正常：我可以打开没有报价的页面，只打开列表。我查看报价并显示报价。我点击“编辑优惠”，我可以编辑并保存更改。保存后，在我的控制器中，我重定向（返回）到商品（只读）页面：

// in the save function:
var offer = this.get("content");
// ...
offer.on('didUpdate', function () {
    controller.transitionToRoute("offer", offer);
});
// ...
store.commit();

但下一页（应该是优惠详情）是空的。页面标题部分仍包含编辑路径中的模板，主插座为空。

如何让Ember重新呈现OfferRoute模板？

这里包含各种renderTemplate调用的路由：

App.OffersIndexRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('offer-list-title', { into: 'application', outlet: 'page-title' });
        this.render('offer-list-content', { into: 'application' });
    }
});

App.OffersRoute = Ember.Route.extend({
    model: function () {
        return App.Offer.find();
    },
    renderTemplate: function () {
        this.render('offer-list', { into: 'application', outlet: 'sub-navigation' });
    }
});

App.OfferRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set('content', model);
        controller.set('offerTemplates', App.OfferTemplate.find());
        controller.set('contentBlockTemplates', App.ContentBlockTemplate.find());
    },
    model: function (params) {
        return App.Offer.find(params.offer_id);
    },
    renderTemplate: function () {
        this.render('offer-title', { into: 'application', outlet: 'page-title' });
        this.render('offer-content', { into: 'application' });
    }
});

App.OfferEditRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('offer-edit-title', { into: 'application', outlet: 'page-title', controller: 'offer' });
        this.render('offer-edit', { into: 'application', controller: 'offer' });
    }
})

更新（解决方案）

在下面两个答案的帮助下，尝试/错误和调试，我得到了它的工作。我基本上添加了OfferIndexRoute，但我还必须使用model来定义this.modelFor("offer")。

我不知道这是否是最优雅的解决方案，但它确实有效。所以这是我现在使用的路线代码：

App.OfferRoute = Ember.Route.extend({
   model: function (params) {
      return App.Offer.find(params.offer_id);
   },
   setupController: function (controller, model) {
      controller.set('content', model);
      controller.set('offerTemplates', App.OfferTemplate.find());
      controller.set('contentBlockTemplates', App.ContentBlockTemplate.find());
   },
   renderTemplate: function () {
      this.render('offer-title', { 
         into: 'application', outlet: 'page-title' });
      this.render('offer-content', {
         into: 'application' });
   }
});

App.OfferIndexRoute = Ember.Route.extend({
   model: function () {
      return this.modelFor("offer");
   },
   renderTemplate: function () {
      this.render('offer-title', { 
         into: 'application', outlet: 'page-title' });
      this.render('offer-content', { 
         into: 'application' });
   }
});

App.OfferEditRoute = Ember.Route.extend({
   renderTemplate: function () {
      this.controllerFor("offer").set("editMode", true);
      this.render('offer-edit-title', { 
         into: 'application', outlet: 'page-title', controller: 'offer' });
      this.render('offer-edit', { 
         into: 'application', controller: "offer" }); //
   }
})

Answer 1

将model和setupController保留在offerRoute中，并将renderTemplate单独移动到offerIndexRoute。


    App.OfferRoute = Ember.Route.extend({
        setupController: function (controller, model) {
            controller.set('content', model);
            controller.set('offerTemplates', App.OfferTemplate.find());
            controller.set('contentBlockTemplates', App.ContentBlockTemplate.find());
        },
        model: function (params) {
            return App.Offer.find(params.offer_id);
        }
     });
    App.OfferIndexRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('offer-title', { into: 'application', outlet: 'page-title' });
        this.render('offer-content', { into: 'application' });
    }
    });

Answer 2

在App.OfferIndexRoute中呈现您的报价（只读）模板...由于App.OfferRoute是一个资源（作为其嵌套路线的父级），从OfferEditRoute到OfferRoute的转换将被重定向到OfferIndexRoute ...

App.OfferIndexRoute = Ember.Route.extend({
renderTemplate: function () {
    this.render('offer-title', { into: 'application', outlet: 'page-title' });
    this.render('offer-content', { into: 'application' });
}
});

这是我尝试过的只是过渡... http://jsbin.com/uxojek/12/edit

从编辑重定向到父资源不会（重新）渲染模板

更新（解决方案）

2 个答案: