骨幹 - 試圖用集合中的下一個或前一個模型重新呈現視圖

Question

我正在嘗試進入主幹，並嘗試執行以下圖像庫。我正在嘗試使用集合中的模型進行渲染。我將展示集合的第一個元素，但我想添加對下一個元素的簡單渲染支持，但我不知道如何執行此操作。

我旁邊實現，以前在我的模型如下所示：

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

或者是否有更好的實現方法？

THX提前

編輯＃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（）得到這個行爲？

THX

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

Answer 2

卡利的答案是正確的，但我會拋出另一個例子。

我會考慮保留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()}); 
    } 
}); 

這裏是一個demo。我喜歡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(); 
}