我正在开发一个基本的 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(没有alert). 模型正在加载(收到警报)并且 params.campaign_id 正在成功传递(可以成功登录到控制台)。
我认为这是一个路由器问题,但不知道从哪里开始。任何帮助,将不胜感激。
谢谢参观!我可以发布更多信息,请在评论中告诉我您需要什么。