私は基本的な ember.js アプリケーションに取り組んでおり、いくつかの動作に少し混乱しています。次のようなルートがいくつかあります。
this.resource('campaigns', { path: '/campaigns'}, function() {
this.route('new', { path: '/new' });
this.route('campaign', { path: '/:campaign_id' });
});
App.CampaignsIndexRoute = Ember.Route.extend({
model: function() {
App.Keyword.find();
return App.Campaign.find();
},
renderTemplate: function(controller, model) {
this.render({outlet: 'page'});
}
});
App.CampaignsCampaignRoute = Ember.Route.extend({
model: function(params) {
alert("Model Firing");
console.log(params.campaign_id);
return App.Campaign.find(params.campaign_id);
},
renderTemplate: function(controller, model) {
this.render({outlet: 'page'});
alert("Template Firing");
}
});
...そして、次のようなビュー:
App.CampaignsCampaignView = Em.View.extend({
templateName: 'templates/campaigns/campaign',
});
...そして、次のようなメイン テンプレート:
<!-- ================================================== -->
<!-- =================== APP HEADER =================== -->
<!-- ================================================== -->
{{ view App.HeaderView }}
<!-- ================================================== -->
<!-- ======================= APP ====================== -->
<!-- ================================================== -->
<div id="app" class="">
<!-- ================================================== -->
<!-- ==================== SIDEBAR ===================== -->
<!-- ================================================== -->
<div id="sidebar">
{{ view App.NavigationView }}
{{ view App.StarredCampaignsView }}
</div>
<!-- ================================================== -->
<!-- ====================== STAGE ===================== -->
<!-- ================================================== -->
<div id="stage" class="">
<!-- ================================================== -->
<!-- ================= STAGE SIDEBAR ================== -->
<!-- ================================================== -->
<div id="stage-sidebar" class="">
{{ view App.StageSidebarView }}
</div>
<!-- ================================================== -->
<!-- ====================== PAGE ====================== -->
<!-- ================================================== -->
<div id="page" class="">
{{ outlet page }}
</div>
</div>
</div>
ご覧のとおり、CampaignsCampaign ルートには 2 つの非常に単純なアラートがあり、何がアクティブ化されているかを知らせてくれます。
したがって、/#/campaigns はキャンペーンのリストを返し、/#/campaigns/new は作成ページを返し、/#/campaigns/:campaign_id は単一のキャンペーンとその詳細を表示する必要があります。
これはすべて、システム内から完全に機能します。/#/campaigns ビューからキャンペーンをクリックすると、詳細ビューに直接リンクし、すべての適切な情報が読み込まれます。
問題
「 http://mysite.com/#/campaigns/ANY_IDのようなものを入力するだけで、リストビューからリンクをクリックしないと、問題が発生します。ページは空白でロードされ、renderTemplate は呼び出されません (noモデルがロードされ (アラートを取得)、params.campaign_id が正常に渡されています (コンソールに正常にログインできます)。
これはルーターの問題だと思いますが、どこから始めればよいかわかりません。どんな助けでも大歓迎です。
ご覧いただきありがとうございます。コメントで必要なものをお知らせください。