4

我的 UI 布局是一个列表（出口“子导航”）/详细信息（出口“出口”），如我之前的问题之一中所述。

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

Ember 页面布局

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

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

但是下一页，应该是报价详细信息，是空的。page-title 部分仍然包含来自编辑路径的模板，并且主出口是空的。

如何让 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，但我还必须定义modelusing 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" }); //
   }
})
4

2 回答 2

2

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

    App.OfferRoute = Ember.Route.extend({
        setupController：功能（控制器，模型）{
            controller.set('内容', 模型);
            controller.set('offerTemplates', App.OfferTemplate.find());
            controller.set('contentBlockTemplates', App.ContentBlockTemplate.find());
        },
        模型：函数（参数）{
            返回 App.Offer.find(params.offer_id);
        }
     });
    App.OfferIndexRoute = Ember.Route.extend({
    渲染模板：函数（）{
        this.render('offer-title', { into: 'application', outlet: 'page-title' });
        this.render('offer-content', { into: 'application' });
    }
    });
于 2013-06-08T14:41:49.753 回答
1

在 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

于 2013-06-06T14:31:58.330 回答