Question

我从Ember.js开始，我需要一些帮助。

我有两个把手。它们非常简单：只显示一个图像列表，如果用户点击某些图像，则在车把＃绘画内的{{outlet}}上打开它。

所有这一切都很完美。但是当用户访问索引＃/ paintings时我需要显示一个默认图像，它需要是绘画数组的第一项（模型FIXTURES）。

当用户加载索引＃/画作时，我真的无法发现如何在把手＃画布{{outlet}}内自动打印把手＃画。

非常感谢！

  <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

你试过redirection吗？我想你可以做这样的事情。

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

Answer 2

只需在集合中设置第一个对象，就可以从路由器执行此操作，我假设您的代码中有些东西，但您应该明白这一点：

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

Answer 3

非常感谢大家！

更好的选择（我认为）是使用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
  }
});

从模型列表加载的默认项目

3 个答案: