backbone.js - Backbone Marionette: CompositeView replacing items instead of appending them -
i've got marionette compositeview
i'm using fill in dropdown. json response clean when call collection.fetch()
within compositeview, instead of appending new itemviews, compositeview seems replacing them in dom.
here's 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 parent layout fetch
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 items appendhtml
call, same behavior. can log each itemview
call onafteritemadded
on @pdcollectionsview
, , item views are distinct; different cids, , appropriate models.
i think problem in use of backbone's fetch
operation. fetch
"syncs" collection state on server. without specifying customization intelligently add new items, update changed items, , remove items no longer on server. i'm guessing if examine collection after call fetch you'll see it's got items being rendered in compositeview.
you can modify fetch
's behavior sync server without removing passing {remove: false}
. should yield 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
Comments
Post a Comment