Backbone Marionette: CompositeView replacing items instead of appending them

Question

I've got a Marionette CompositeView that I'm using to fill in a dropdown. The JSON response is clean when I call collection.fetch() from within the CompositeView, but instead of appending the new ItemViews, CompositeView seems to be replacing them in the DOM.

Here's my code (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

And the parent layout where the fetch is called:

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

I've tried manually appending the items with an appendHTML call, but I get the same behavior. I can log each itemView with a call to onAfterItemAdded on the @PDCollectionsView, and the item views are distinct; different cids, and the appropriate models.

Chris Camaratta Chris Camaratta · Accepted Answer · 2013-08-24T18:40:33

I think the problem is in your use of Backbone's fetch operation. fetch "syncs" the collection with its state on the server. Without specifying any customization it will intelligently add new items, update changed items, and remove items no longer on the server. I'm guessing that if you examine the collection after you call fetch you'll see it's only got the items that are being rendered in the CompositeView.

You can modify fetch's behavior to sync to the server without removing anything by passing {remove: false}. This should yield the results you're looking for:

    @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

Backbone Marionette: CompositeView replacing items instead of appending them

1 Answers