1

我正在尝试使用下一个/上一个按钮制作图像幻灯片，但我不明白我应该如何让它一起工作。有人可以帮我把碎片粘起来吗？

这是数据的样子：

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

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

我的两个担忧是：在数组中查找当前项的代码（以及获取下一个或上一个对象的代码）只是感觉“错误”或过于“复杂”。

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

一些更有用的东西：

车把模板：

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

0 回答 0