How to automatically render some default content in ember.js?

Question

I'm working on my first Ember.js project and I've to deal with the current problem:

I have a "press" page which has more contents. In ember, there are two routes - let's call it "abouts" for whole page and "about" for each content on a page. Basically, there are (currently) 7 pictures/items with titles etc. When you click on each of those, clicked picture/press gets rendered and opened. This all works perfectly.

What I want to do is - when "abouts" page gets opened, I want to automatically render latest content (right now, nothing gets rendered until you click on an image). One known solution to do that is to pass an additional argument (id) in {{linkTo}} (which is connected to the menu item) in my view, like this:

{{#linkTo 'about' 6 title='Press'}}Press{{/linkTo}}

This works, but it's not dynamic because id is hardcoded. What I want is to dynamically pass the length of "about" items minus one (in my case 7, but it will grow). Is there any way to get length of items "about" items? Maybe in ApplicationRoute or somehow?

Or do you maybe have any other idea of how to solve this? Simply, how to render some content by default?

I'm also attaching two image, to maybe be more clear about what I want to do. enter image description here

enter image description here

dperitch dperitch · Accepted Answer · 2013-11-15T17:59:50

I've solved this a little bit different. Here's the solution.

With {{#linkTo}}, I've generated link to root page, like this:

{{#linkTo 'abouts' title='Press'}}Press{{/linkTo}}

In AboutsRoute, I've added redirection which is performed immediately. It looks something like this.

App.AboutsRoute = Ember.Route.extend({
    model: function() {
        return this.store.findAll('about');
    },
    afterModel: function(abouts, transition) {
        this.transitionTo('about', abouts.get('length'));
    }
});

How to automatically render some default content in ember.js?

1 Answers