Marionette Backbone Composite View update model data on collection changes

Question

I have been using a Marionette Composite View to render to display a page that contains a table of data along with a serious of buttons which allows the user to action on the information.

An example would be a 'reload' button and a 'confirm all' button.

I have encountered a bug whereby repeatedly hitting 'reload' is causing duplicate items in the collection. I'm trying to take this back to basics and understand what is the recommended way of communicating model changes between both the model and the collection in a composite view.

Can someone help?

Answer 1

If you use a Marionette CollectionView or CompositeView they will re-render to reflect what is in your collection, therefore your collection must contain duplicate models.

What are you calling in your refresh method? It sounds like this is where the problem lies. If you want to refresh your collection to reflect what is on the server, you should call the fetch() method on the collection. Default behaviour is to merge the current collection and the data received from the server.

If this is still causing duplicates it could be an error with the data returned from the server - eg if IDs aren't included.

If you want to completely replace the current collection with the data returned from the server you can pass {reset: true} to the fetch call, but this isn't recommended as you will be completely re-rendering every row in the table every time you refresh.