Default item loaded from model list

Question

I'm starting with Ember.js and I need some help.

---

I have the two handlebars below. They are very simple: just shows a list of images, and if the user click on some of the images open it bigger on {{outlet}} inside the handlebars#paintings.

All that is working perfectly. But I need to show a default image when the user access the index#/paintings, and it need to be the first item of the paintings array (the model FIXTURES).

I really couldn't discovery how to print the handlebar#painting inside the handlebars#paintings {{outlet}} automatically when user loads the index#/paintings.

Thanks a lot!

---

  <script type="text/x-handlebars" id="paintings">
    <div class="left">{{outlet}}</div>
    <div class="right">
      <ul>
        {{#each}}
          <li>
            {{#link-to 'painting' this}}
              <img {{bind-attr src=thumbnail}} {{bind-attr alt=name}}>
            {{/link-to}}
          </li>
      {{/each}}
      </ul>
    </div>
    <div class="clear"></div>
  </script>
  <script type="text/x-handlebars" id="painting">
    <img {{bind-attr src=link}} />
  </script>

Answer 1

Thanks a lot everyone!

The better choice (I think) is use the renderTemplate:

App.PrintsRoute = Ember.Route.extend({
  // ...
  renderTemplate: function(controller, model) {
    this.render('prints'); // the list of prints

    controller = this.controllerFor('print');
    controller.set('content', model.get('firstObject')); //loads the default print
    this.render('fullsize', {outlet: 'fullsize', controller: controller, into: 'prints'}) //shows it in the right place
  }
});