以前の質問の 1 つで説明したように、UI のレイアウトはリスト (アウトレット「サブナビゲーション」) / 詳細 (アウトレット「アウトレット」)です。
詳細には、モデルの読み取り専用バージョンが含まれている場合もあれば、メイン アウトレットでレンダリングされた「編集」データ バージョンが含まれている場合もあります。
ルーターのリソースの 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" }); //
}
})