Nested link firing rather than changing URL

Question

I am working on a basic ember.js application and am a bit confused about some behavior. I have several routes that look like this:

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

});

... and a view that looks like this:

 App.CampaignsCampaignView = Em.View.extend({ templateName: 'templates/campaigns/campaign', }); 

... and a basic template that looks like this:

 <!-- ================================================== --> <!-- =================== 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> 

As you can see, there are two very simple warnings in the CampaignsCampaign route to let me know what is being activated.

So, / # / campaign returns a list of campaigns, / # / campaign / new returns a creation page and / # / campaign /: campaign_id should display one campaign and its details.

All this works great inside the system. When you click a campaign in the / # / campaign view, it directly links to the detailed view with all the necessary information loading.

Problem

The problem arises if you just type something like http://mysite.com/#/campaigns/ANY_ID and don’t click the link from the list. just loads empty, and renderTemplate is not called (no warning). The model loads (receiving a warning), and params.campaign_id is successfully passed (can be successfully registered in the console).

I think this is a problem with the router, but I'm not sure where to start. Any help would be appreciated.

Thanks for watching! I can post more information, just let me know what you need in the comments.

Answer 1

The process that runs when you go directly to the page is a little different than if you follow the link. I don’t see the links in your template, so I'm not 100% sure what is happening, but in general, if you go to the link

 {{#linkTo myRoute myVar}} A Link {{/linkTo}} 

The route does not start the model function, you just start with myVar as the model (but you still execute the setupController function).

So, for the hard disk to work, you will need the model function, which collects information that would be passed to the link variable.