Question

I am working on a basic ember.js application and am a little confused with some behavior. I have some 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 main 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 2 very simple alerts in the CampaignsCampaign route just to let me know what is being activated.

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

This all works perfectly from inside the system. When you click a campaign from the /#/campaigns view it links directly to the detailed view, with all proper info loading.

The Issue

The problem arises if you just type in something like “http://mysite.com/#/campaigns/ANY_ID and don’t click a link from the list view. The page just loads blank and the renderTemplate is not being called (no alert). The model is loading (getting an alert) and the params.campaign_id is being passed successfully (can be logged into console successfully).

I am thinking this is a router issue but am not sure where to start. Any help would be appreciated.

Thanks for taking a look! I can post more info, just let me know what you need in comments.

Answer 1

The process that is followed when you go directly to a page is slightly different than if you follow a 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 run the model function, you just start with myVar as your model (but you still execute the setupController function).

So for the hardlink to work, you need a model function that gathers the information that would have been passed in by the link variable.