0

我正在尝试进入主干并拥有以下内容，这是尝试制作图片库的尝试。我正在尝试将渲染与集合中的模型一起使用。我将展示集合的第一个元素，但我想添加对使用下一个元素进行简单重新渲染的支持，但我不知道该怎么做。

我已经在我的模型上实现了 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');
      }

还是有更好的方法来实现这一点？

提前谢谢

编辑#1 

 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' );
          this.render(this.collection.first());  // <- this works correct
        },

        render: function(xModel) {
          console.log(xModel.toJSON());
          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());   // <- this doesn't seem to do anything, event is called correctly but doesn't seem to move to next element
        },

    However if I adjust to this, it will load the 3rd element of the array

loadNext: function(){
  console.log('i want to load Previous');
  this.render(this.collection.at(2));
},

我将如何使用 this.collection.next() 来获得这种行为？

谢谢

4

2 回答 2

1

您正在寻找的是一种使用Collection来操作下一个/上一个内容的方法。你目前拥有的只是把它放在模型上。这是Collection我在项目中使用的基础：

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
});
于 2013-08-28T04:14:54.313 回答
1

卡利的回答是对的，但我会举另一个例子。

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

您的模型声明如下所示。注意我重命名previous为prev. Backbone.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;
  }
});

Backbone.Model拥有一个包含您选择的模型的泛型：

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

这是一个演示。我喜欢state模型方法，因为我没有在模型中存储应用程序状态信息。

如果你不喜欢state模型方法，你总是可以把它扔在地板上：

/ .. 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();
}
于 2013-08-28T07:53:24.420 回答