Backbone Marionette：CompositeView替換項目而不是追加它們

Question

我有一個我用來填寫下拉列表的Marionette CompositeView。當我從CompositeView中調用collection.fetch()時，JSON響應是乾淨的，但是替代追加新的ItemViews，CompositeView似乎將替換爲它們在DOM中。

這裏是我的代碼（CoffeeScript的）：

class @PDCollectionItemView extends Backbone.Marionette.ItemView 
    el: 'li' 
    template: Handlebars.compile('{{ title }}') 

class @PDCollectionsView extends Backbone.Marionette.CompositeView 
    id: 'pd_collections' 
    className: 'selection' 
    itemView: PDCollectionItemView 
    itemViewContainer: '.scroll ul' 
    template: HandlebarsTemplates['connections/collection_select'] #handlebars_assets gem 

    ui: 
     modalTrigger: '#pd_collection_selector' 
     modal : '#pd_selection_modal' 
     selectBtn : '#select_collection' 

    initialize: -> 
     @selectedCollection = undefined 
     Connectors.App.vent.on "connections:collectionStaged", @assignSelectedCollection 

return @PDCollectionsView 

和父佈局，其中的fetch被稱爲：

class @IndexLayout extends Backbone.Marionette.Layout 
    initialize: -> 
     @collections = new PDCollectionsCollection 
     @collectionsView = new PDCollectionsView 
      collection: @collections 

    onRender: -> 
     @collectionSelect.show @collectionsView 

     @collections.fetch 
      success: (collection, response, options) => 
       Connectors.App.vent.trigger "connections:collectionsLoaded" 
       Connectors.App.vent.trigger "loadComplete" 

      error: (collection, response, options) => 
       console.log response 

我有appendHTML呼叫嘗試手動附加項目，但我得到相同的行爲。我可以在@PDCollectionsView上通過致電onAfterItemAdded記錄每個itemView，並且項目視圖是不同;不同的cids和適當的模型。

Answer 1

我認爲問題在於您使用Backbone的fetch操作。 fetch將服務器上的狀態與「集合」同步。如果不指定任何定製，它將智能地添加新項目，更新更改的項目以及不再在服務器上刪除項目。我猜如果你在調用fetch之後檢查集合，你會發現它只有在CompositeView中呈現的項目。

您可以修改fetch的行爲以同步到服務器而不通過傳遞{remove: false}來刪除任何內容。這應該會產生你正在尋找的結果：

@collections.fetch 
     remove: false 

     success: (collection, response, options) => 
      Connectors.App.vent.trigger "connections:collectionsLoaded" 
      Connectors.App.vent.trigger "loadComplete" 

     error: (collection, response, options) => 
      console.log response