ember.js - emberjs で配列を反復処理し、ルートを更新して変更を反映するにはどうすればよいですか?

Question

次へ/前へのボタンを使用して画像スライドショーを作成しようとしていますが、すべてを一緒に機能させる方法がわかりません。誰かがピースを接着するのを手伝ってくれますか?

データは次のようになります。

{
  "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"
        }
      ]
    }
  ]
}

ユーザーが mediaitems 配列を反復できるようにしたいと思います。したがって、ユーザーがルートに入ると、次のようになります。

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

その項目は画面の中央に配置し、次へ/前へのボタンでユーザーを配列内の次または前の項目に移動する必要があります。

これは私のルートがどのように見えるかです：

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

このルートは、「prev」と「next」の 2 つのアクションを持つ「overlay」というテンプレートをレンダリングします (きれいに保つために、コントローラーには prev のみを表示しています)。

私の2つの懸念は、配列内の現在のアイテムを検索するコード（および次または前のオブジェクトを取得するコード）が「間違っている」または過度に「複雑」に感じられることです。

ルートを更新して次/前のアイテムにリダイレクトする方法がわかりません。

さらに便利なもの：

ハンドルバー テンプレート:

<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.Newsitem = DS.Model.extend({
  title: DS.attr('string'),

  mediaitems: DS.hasMany('App.Mediaitem')
});

App.Mediaitem = DS.Model.extend({
  value: DS.attr('string'),

  newsitem: DS.belongsTo('App.Newsitem')
});

私のルート:

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