Javascript 主干-尝试使用集合中的下一个或上一个模型重新渲染视图

我试图进入主干网，并有以下这是在做一个图像画廊的尝试。我正在尝试对集合中的模型使用渲染。我将展示集合的第一个元素，但我想添加对下一个元素重新命名的支持，但我不知道如何做到这一点

我在我的模型上实现了next和previous，如下所示：

arc.Item = Backbone.Model.extend({
    next: function () {
        if (this.collection) {
            return this.collection.at(this.collection.indexOf(this) + 1);
        }
    },previous: function () {
        if (this.collection) {
            return this.collection.at(this.collection.indexOf(this) - 1);
        }
    }
});

这里的问题（可能不止我要问的问题）在loadNext方法中。如何获取此集合中的当前位置并增加它

arc.ItemsGalleryView = Backbone.View.extend({
      el: $('#mig-container'),
    events: {'click .next-btn' : 'loadNext', 
             'click .previous-btn':'loadPrevious' },
       template:_.template($('#mig-image-tmp').text()),
      initialize: function() {
          _.bindAll( this, 'render' );
          // render the initial state
          var thisModel=this.collection.first();
          this.render(thisModel);
      },

      render: function(xModel) {  // <- is it ok to do it this way?
          var compiled=this.template(xModel.toJSON());
          this.$el.html(compiled);
          return this;
      },

      loadNext: function(){
        console.log('i want to load Next');
        this.render(this.collection.next());  // <- how would I do this
        this.render(this.collection.first().next());  // <- this works by always giving me the second.
        // I need to replace first with current

      },
      loadPrevious: function(){
        console.log('i want to load Previous');
      }

arc.ItemsGalleryView=Backbone.View.extend({
el:$（“#mig集装箱”），
事件：{'click.next btn'：'loadNext'，
'click.previous btn'：'loadPrevious'}，
模板：35;模板（$（'#mig图像tmp'）.text（）），
初始化：函数（）{
_.bindAll（这是“呈现”）；
//渲染初始状态
var thisModel=this.collection.first（）；
this.render（thisModel）；
},
render:function（xModel）{//您正在寻找的是一种使用
集合
来处理下一个/prev内容的方法。您当前拥有的只是将其放在模型上。以下是我在项目中使用的基本
集合
：

App.Collection = Backbone.Collection.extend({
  constructor: function(models, options) {
    var self = this;
    var oldInitialize = this.initialize;
    this.initialize = function() {
      self.on('reset', self.onReset);
      oldInitialize.apply(this, arguments);
    };
    Backbone.Collection.call(this, models, options);
  },
  onReset: function() {
    this.setActive(this.first());
  },
  setActive: function(active, options) {
    var cid = active;
    if ( active instanceof Backbone.Model ) {
      cid = active.cid;
    }
    this.each(function(model) {
      model.set('current', model.cid === cid, options);
    });
  },
  getActive: function() {
    return this.find(function(model) {
      return model.get('current');
    });
  },
  next: function() {
    return this.at(this.indexOf(this.getActive()) + 1);
  },
  prev: function() {
    return this.at(this.indexOf(this.getActive()) - 1);
  }
});

它可能并不完美，但对我来说很有用。希望它至少能让你走上正轨。以下是我如何使用它：

var someOtherCollection = App.Collection.extend({
    model: MyModel
});

kalley的答案是正确的，但我会再举一个例子

我会考虑将当前模型保存在
状态
模型中，并从那里开始工作。您也可以在
状态
模型中存储其他应用程序信息

您的模型声明如下所示。请注意，我已将
previous
重命名为
prev
主干。model
已经有了
previous
方法，我们不想过度使用它

var Model = Backbone.Model.extend({
  index:function() {
    return this.collection.indexOf(this);
  },
  next:function() {
    return this.collection.at(this.index()+1) || this;
  },
  prev:function() {
    return this.collection.at(this.index()-1) || this;
  }
});

拥有一个通用的
主干。模型
，用于保存所选模型：

var state = new Backbone.Model();

在视图中，您将侦听状态模型的更改，并相应地进行渲染：

var View = Backbone.View.extend({
  el: '#mig-container'
  template:_.template($('#mig-image-tmp').html()),
  events: {
    'click .prev' : 'prev',
    'click .next' : 'next'
  },
  initialize:function() {
    this.listenTo(state,'change:selected',this.render);
    state.set({selected:this.collection.at(0)});
  },
  render:function() {
    var model = state.get('selected');
    this.$el.html(this.template(model.toJSON()));
    return this;
  },
  next:function() {
    // get the current model
    var model = state.get('selected');

    /* Set state with the next model, fires a change event and triggers render.
       Unless you are at the last model, then no event will fire.
     */
    state.set({selected:model.next()});
  },
  prev:function() {
    var model = state.get('selected');
    state.set({selected:model.prev()});
  }
});

我喜欢
状态
模型方法，因为我没有在模型中存储应用程序状态信息

如果您不喜欢
状态
模型方法，您可以随时将其扔到地板上：

/ .. code above ../

initialize:function() {
  this.model = this.collection.at(0);
  this.render();
},
render:function() {
  this.$el.html(this.template(this.model.toJSON()));
  return this;
},
next:function() {
  this.model = this.model.nxt();
  this.render();
},
prev:function() {
  this.model = this.model.prev();
  this.render();
}

再说一遍，为什么不在你的
事件中单击.prev btn'
？对不起，从主干开始-教程不太好。一个事件散列可以容纳多个事件吗？当然，
事件可以容纳你需要的任意多个独特的事件规范：
事件
只是用来构建jQuery的一组委托形式
on
毕竟。thx@muistooshort-我已经更新了这个问题。我仍然在处理集合中的当前索引时遇到一些问题。我相信有一些简单的原因，但在主干/下划线文档中没有看到任何东西跳出来攻击我。再次，我只是试图掌握它的窍门，但进行了搜索。谢谢e任何帮助。最简单的方法是创建新变量以保持模型索引，通过调用collection的方式在initialize中设置值。在（）thx，我已经尝试让它工作，但没有骰子。看起来它应该工作，但它不工作。我已将上面的代码包含在编辑#1中。我可以调用`this.collection.at（2）1会使用新模型重新渲染视图。我知道我正在做一些非常重要的事情。@timpone，你注意到演示了吗？单击
runwithjs
开始。
/ .. code above ../

initialize:function() {
  this.model = this.collection.at(0);
  this.render();
},
render:function() {
  this.$el.html(this.template(this.model.toJSON()));
  return this;
},
next:function() {
  this.model = this.model.nxt();
  this.render();
},
prev:function() {
  this.model = this.model.prev();
  this.render();
}