Ember.js 我应该如何在emberjs中迭代数组并更新路由以反映更改？

我正在尝试用“下一步/上一步”按钮制作一个图像幻灯片，但我不明白应该如何让它一起工作。有人能帮我粘这些碎片吗

以下是数据的外观：

{
  "newsitems": [
    {
      "id": "1",
      "title": "Amai het wordt bangelijk!",
      "mediaitems": [
        {
          "id": "AEOpX8tmiUI",
          "newsitem_id": "1",
          "value": "AEOpX8tmiUI"
        },
        {
          "id": "kxopViU98Xo",
          "newsitem_id": "1",
          "value": "kxopViU98Xo"
        },
        {
          "id": "1",
          "newsitem_id": "1",
          "value": "1276468632.JPG"
        },
        {
          "id": "3",
          "newsitem_id": "1",
          "value": "1278286227.jpg"
        }
      ]
    }
  ]
}

App.MediaitemRoute = Ember.Route.extend({
  model: function(params) {
    return App.Mediaitem.find(params.mediaitem_id);
  },

  setupController: function(controller, model) {
    this.controllerFor('overlay').set('content', model);
  },

  renderTemplate: function(controller, model) {
    this.render('overlay', { into: 'application', outlet: 'overlay', controller: 'overlay'});
  }
});

我想让用户迭代mediaitems数组。因此，当用户进入路线时：

http://domain.com/#!/newsitems/1/overlay/kxopViU98Xo

该项目应位于屏幕中央，下一个/上一个按钮应将用户带到阵列中的下一个或上一个项目

我的路线是这样的：

{
  "newsitems": [
    {
      "id": "1",
      "title": "Amai het wordt bangelijk!",
      "mediaitems": [
        {
          "id": "AEOpX8tmiUI",
          "newsitem_id": "1",
          "value": "AEOpX8tmiUI"
        },
        {
          "id": "kxopViU98Xo",
          "newsitem_id": "1",
          "value": "kxopViU98Xo"
        },
        {
          "id": "1",
          "newsitem_id": "1",
          "value": "1276468632.JPG"
        },
        {
          "id": "3",
          "newsitem_id": "1",
          "value": "1278286227.jpg"
        }
      ]
    }
  ]
}

App.MediaitemRoute = Ember.Route.extend({
  model: function(params) {
    return App.Mediaitem.find(params.mediaitem_id);
  },

  setupController: function(controller, model) {
    this.controllerFor('overlay').set('content', model);
  },

  renderTemplate: function(controller, model) {
    this.render('overlay', { into: 'application', outlet: 'overlay', controller: 'overlay'});
  }
});

这是覆盖的ObjectController：

App.OverlayController = Ember.ObjectController.extend({
  prev: function(){
    var mediaitems = this.get('model').get('newsitem.mediaitems');
    var currentMediaItemID = this.get('model').get('id');

    var currentIndex = 0;
    var i = 0;

    mediaitems.forEach(function(object){
      if(object.get('id') == currentMediaItemID) currentIndex = i;
      i++;
    });

    // How should I transition to the next object?
  }
});

路由呈现一个名为“overlay”的模板，该模板有两个动作：“prev”和“next”（我只是在我的控制器中显示prev以保持整洁）

我的两个顾虑是：在数组中查找currentitem的代码（以及获取下一个或上一个对象的代码）感觉“错误”或过于“复杂”

我不知道如何更新路线并重定向到下一个/上一个项目

一些更有用的东西：

车把模板：

<script type="text/x-handlebars" data-template-name="overlay">
  <div class="overlay">
    <a {{action "prev" target="controller"}}>PREV</a>
    <a {{action "next" target="controller"}}>NEXT</a>
  </div>
</script>

我的路线：

App.Router.map(function(){
  this.resource('newsitems', function(){
    this.resource('newsitem', {path:':newsitem_id'}, function(){
      this.resource('mediaitem', {path:'/overlay/:mediaitem_id'});
    });
  });
});

---

有没有想过？