Not loading view on page load

Question

The Ember.js application

# routes/application.js.coffee
########################################

App.ApplicationRoute = Ember.Route.extend
    model: ->
        @store.findAll('category').then (records) ->
            { 
                categories: records
            }


# routes/categories.js.coffee
########################################

App.CategoriesRoute = Ember.Route.extend
    model: ->
        @store.find 'category'


# routes/category.js.coffee
########################################

App.CategoryRoute = Ember.Route.extend
    model: (params) ->
        serialize: (model, params) ->
            id: model.get('slug')


# templates/application.hbs
########################################

{{ partial 'categories' }}
<p>---</p>

{{ outlet }}


# templates/categories.hbs
########################################

<h1>Categories...</h1>

{{#each category in categories}}
    {{#link-to 'category' category}}
        {{category.title}}
    {{/link-to}}
{{/each}}


# templates/category.hbs
########################################

<h2>{{title}}</h2>
<h3>{{description}}</h3>


# router.js.coffee
########################################
App.Router.map ->
    @resource 'categories', path: 'categories'
    @resource 'category', path: 'category/:slug'


# store.js.coffee
########################################
App.ApplicationAdapter = DS.ActiveModelAdapter.extend
    namespace: 'api/v1'

What I am trying to accomplish

I am loading Category on the Application route so the data can be used to render the site-wide navigation via the categories partial.

Model is acquired successfully and stored, according to the Ember console. If it makes any difference, one-to-many data is being sideloaded, called Sections, which is also stored successfully.

The category partial is rendered as expected, with links to each section. Clicking on them yields the rendering of the title and description.

What is wrong

Refreshing the application on the route of say, /#/category/title-1, doesn't render the category view (both title and description). However, clicking on the links generated in the categories partial will render the view.

What I expect on page load is the rendering of the category view, without the need of clicking on the categories links. What am I doing wrong?

Viet Viet · Accepted Answer · 2013-12-04T20:29:29

After playing around with the Application for too long, I figured out a solution to my problem.

When using the Ember console, I saw that the model for the Category view was referenced to [Object object] and not App.Category. I had to specify the store to search by the slug. Therefore, the code looks like this

# routes/category.js.coffee
########################################

App.CategoryRoute = Ember.Route.extend
    model: (params) ->
        serialize: (model, params) ->
            id: model.get('slug')
    @store.find('category', params.slug)

The view is now rendered on page load.

Not loading view on page load

The Ember.js application

What I am trying to accomplish

What is wrong

1 Answers