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>

claptimes · Answer 1 · 2013-11-06T14:57:40.877

1

Have you tried redirection? I think you could do something like this.

App.Router.map(function() {
  this.resource('paintings');
  this.resource('painting', { path: '/painting/:painting_id' });
});

App.PaintingsRoute = Ember.Route.extend({
  afterModel: function(paintings, transition) {
    this.transitionTo('painting', paintings[0]);
  }
})

edited Nov 06 '13 at 14:57

answered Nov 06 '13 at 13:56

claptimes

1,615
15
20

@edu suggested that the there should be a modification `this.transitionTo('painting', paintings.get('firstObject'));`. I took the above source from the Ember.js site, but please let me know if the answer should be edited. – claptimes Nov 06 '13 at 14:57
Before (when I made the edit) there was `this.transitionTo('post', posts[0]);` BTW paintings[0] will have the same result as paintings.get('firstObject') but the last is ember idiomatic, – Edu Nov 06 '13 at 15:37
Thanks for the clarification. I noticed my copy/paste error when I look again at the answer. – claptimes Nov 06 '13 at 15:56
Thanks a lot everyone! Almost done :) I'm using a nested route, then the App.Router is: `App.Router.map(function() { this.resource('paintings', function() { this.resource('painting', {path: ':painting_id'}); }); });` The @claptimes response is almost perfect, I just need to add an if `because I lost the direct url access (index.html#/paintings/20): afterModel: function(paintings, transition) { if (transition.params.painting_name == null) { this.transitionTo('painting', paintings.get('firstObject')); } }` – Eduardo Rosa Nov 07 '13 at 00:04
Now, there's only one problem: if the user click on paintings link again (code below), the afterModel isn't fired, then the first image doesn't loads again. I'm searching for some other event to resolve this :) `{{#link-to 'paintings'}}Pinturas{{/link-to}}` – Eduardo Rosa Nov 07 '13 at 00:11

score 0 · Answer 2 · answered Nov 06 '13 at 13:54

Just set thee first object in the collection, you can do this from your router, I am assuming somethings from your code but you should get the idea:

App.PaintingsRoute = Ember.Route.extend({
    /**
     * guessing model here is the collection of paintings
     */
    setupController: function(controller, model) {
        var paintingController = this.controllerFor('painting');
        paintingController.set('content', model.get('firstObject'));
        controller.set('content', model);
    }
});

AFAIK the problem here is that ember will not render the painting template into the {{otulet}} automatically — Edu, Nov 06 '13 at 14:45

score 0 · Accepted Answer · answered Nov 08 '13 at 01:36

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

Default item loaded from model list

3 Answers3