關於主幹和收藏以及添加機制的問題

Question

我開發了一個web應用程序 - 這是一個html塊，必須在用戶按下next或prev按鈕時重新顯示 - 這是一個輪播。

我有一個包含5個元素（視頻）的數組，並且用戶按下next或prev按鈕逐個查看它。

當應用程序是初始化 - 我顯示第一個元素（視頻） - this.restore（0）; 當用戶達到5個元素並按next時，我們必須向他顯示1個元素。當用戶查看適合elelement並按prev按鈕 - 我們必須顯示最後一個元素 - 簡單的圓形傳送帶。

而且我在模型中添加了索引變量 - model.index = index;爲了知道我在什麼元素 - var currentPosition = this.model.index;渲染時

我有以下代碼：

型號：

var TopVideo = BaseModel.extend({ 
    urlRoot: "/user/partnerphotovideo/id/" 
}); 

模板：

<script type="text/x-underscore-template" id="top-video-template"> 
<div class="b-box top-video"> 
    <h2 class="box-title"><span>Top videos:</span> Great_Sarah</h2> 
    <div class="box-content"> 
     <div class="b-photo video"> 
     <div class="photo"><img alt="" src=""></div> 
     </div> 
     <div class="b-buttons"> 
     <a data-profile-id = "<%- nextPositionId %>" class="btn next" href="#"></a> 
     <a data-profile-id = "<%- prevPositionId %>" class="btn prev" href="#"></a> 
     <a class="button" href="#">Open in big Screen</a> 
     </div> 
    </div> 
</div> 
</script> 

查看：

var TopVideoView = BaseView.extend({ 
    templateId : '#top-video-template', 
    model : new TopVideo, 
    collection : new Backbone.Collection, 
    profileIds : [], 

    events: { 
     "click [data-profile-id]" : function (event) { 
      var profileId = $(event.currentTarget).data('profile-id'); 
      this.restore(profileId); 
     }, 
    }, 

    initialize: function(profileIds) 
    { 
     if (profileIds.length > 0) { 
      this.profileIds = profileIds; 
      this.setElement($('#top_videos')); 
      this.template = _.template($(this.templateId).html()); 
      this.model.on("change", this.render, this); 
      this.restore(0); 
     } 
    }, 

    render: function() 
    { 
     var currentPosition = this.model.index; 
     if (currentPosition < this.profileIds.length - 1) { 
      nextPositionId = currentPosition + 1 
     } else { 
      nextPositionId = 0; 
     } 
     if (currentPosition != 0) { 
      prevPositionId = currentPosition - 1 
     } else { 
      prevPositionId = this.profileIds.length - 1; 
     } 
     this.$el.html(this.template({nextPositionId:nextPositionId,prevPositionId:prevPositionId})); 

    }, 

    restore: function(index) { 
     var id = this.profileIds[index]; 
     var current = this.collection.at(index); 
     if (!current) { 
      self = this; 
      this.model.url = this.model.urlRoot + id + '/?videoType=presentation_video'; 
      this.model.fetch({ 
       success: function(model) { 
        model.index = index; 
        model.trigger("change"); 
        self.collection.add(model); 
       }, 
       silent: true 
      }); 
     } else { 
      current.trigger("change"); 
     } 

    }, 

}); 

調用視圖在我應用程序（我的應用程序中的一段代碼）：

app.views = (function() { 
     var items = {}; 

     return { 
      instance: function (name, params) { 
       if (!this.exists(name)) { 
        if (!$.isEmptyObject(window[name])) { 
         items[name] = new window[name](params); 
        } 
       } 

       return items[name]; 
      }, 

      exists: function (name) { 
       return name in items; 
      } 
     }; 
    })(); 

var profileIds = ['dasdsad342432','4332432dsadsad','dasdsa3421424','dsadsadsad654654','222ddd']; 
app.views.instance('TopVideoView',profileIds); 

;

我的問題是 - 當我添加新的模型集合（self.collection.add（model）;） - 我仍然有一個集合中的模型。我無法將更多的模型添加到集合中 - 模型屬性在這些模型中不同。

也嘗試：

self.collection.add(model,{"at" : index}); 
    but still no result 

而且使用時：

model1 = {a : index}; 
self.collection.add(model1); 

它添加了一個以上的機型。

嘗試這樣的：

model.set({index: index},{silent : true}); 
self.collection.add(model); 

當我使用：

model.set({id: id},{silent : true}); 
self.collection.add(model); 

它添加到收藏更多然後1個模型。但所有這些模型都是一樣的。它們具有相同的cId（c0），相同的屬性（最後一個模型的屬性）。

也沒有效果

我做錯了什麼？你有什麼想法嗎？

在此先感謝。

Answer 1

問題已解決。 每當我要將它添加到集合中時，我只需創建模型。

restore: function(index) { 

     var id = this.profileIds[index]; 

     //var current = this.collection.at(index); 
     var current = this.collection.get({ index: index }); 

     if (!current) { 
      console.log('not fountd'); 
      self = this; 
      this.model = new TopVideo; 
      this.model.on("change", this.render, this); 
      this.model.url = this.model.urlRoot + id + '/?videoType=presentation_video'; 

      this.model.fetch({ 
       success: function(model) { 

        model.set({index: index},{silent : true}); 
        model.set({id: id},{silent : true}); 
        self.collection.add(model,{merge: true}); 
        model.trigger("change"); 

       }, 
       silent: true 
      }); 
     } else { 
        this.model = current; 
      current.trigger("change"); 
     } 

    },