4

以前の質問の 1 つで説明したように、UI のレイアウトはリスト (アウトレット「サブナビゲーション」) / 詳細 (アウトレット「アウトレット」)です。

詳細には、モデルの読み取り専用バージョンが含まれている場合もあれば、メイン アウトレットでレンダリングされた「編集」データ バージョンが含まれている場合もあります。

Emberページのレイアウト

ルーターのリソースの 1 つがネストされています。

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 セクションには edit ルートからのテンプレートがまだ含まれており、メイン アウトレットは空です。

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

更新 (解決策)

以下の2つの回答と、試行錯誤とデバッグの助けを借りて、私はそれを機能させました。基本的に を追加しましたが、 usingOfferIndexRouteも定義する必要がありました。modelthis.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

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 に答える