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?
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.
Related
If my client-side application displays a list of items requested from my API, and a user deletes an item, is it best practice to then again call the list GET at the end of the successful HTTP DELETE promise and update the view? Or should the application state simply be updated locally after the delete, without hitting the API again?
I understand optimistically updating your application, but, that is more for view update performance rather than reducing server calls.
You should make another GET request to update the list if the list data may change without user interaction, eg: server-side updates, or another session that can change the same list
With the performance aspect, let the user see the entry deleted ASAP, then very shortly after they will see the updated changes (if there are any), and it won't disturb them.
If there is a deletion error, refresh the updated list regardless
EDIT: I'd also suggest using websockets
I need to update data every minute and on some specific events.
My idea is to create an action in ApplicationRoute, that would find the current router and evoke the model() method again.
But how can I access other routes from ApplicationRoute?
Maybe there are any other ideas to make it?
You don't have to reenvoke the model hook.
The matter is that most store data retrieval methods, for example, store.findAll() (ex store.find()) return live arrays. A live array will automatically update its content whenever new records appear in the store or existing records are removed.
So all you need is to repopulate the store.
A good place to periodically fetch the data is a service.
Also, you can enable/disable periodic data retrieval from within routes. Simply create a mixin that would enable data retrieval in the service when the route is visited and disable when the route is left.
In Backbone terms, What is the correct scheme to persistently update a model which is a member of a collection and reperesented in the user interface?
By utilising a DOM event and method in the view.
Then grabbing the id of the element to be processed by from the event objects, eg. from click.
finding the model in the collection, by findWhere.
Then using set on the model changing attributes.
Then using save() on the model to update the model on server side and client side.
But one may need to wait for success on server side process and only then update the client side model and collection. This can be done by {wait: true} in order to wait server response, but does this mean if and only if the server process succeeds to persist the model in the db this attributes will be set in the client side model. What if it fails on server side what about the preceding lines that set() the model found.
Also adding the new state of the model into the collection.
Lastly, re-rendering the view with the new state of the collection.
It sounds a little bit like you may be wanting 2-way data binding.
Backbone.Stickit is a great plugin for that.
I'm having an issue refreshing data inside didInsertElement in a view. I'm calling a model and getting the data (it's being queried from an API) and then loading it into a library (data tables) within didInsertElement. However, once I delete a record the data from the model is outdated and needs to be called again and put into the didInsertElement.
Any help would be greatly appreciated.
If you are manually modifying the dom (or injecting into some third party element) and not using handlebars/ember the observers won't be setup which trigger and update the dom when the underlying model changes. You'll need to set up some observers on the data and manually update the data as you see the data changing.
Posts.create({'body':post_body});
When I call that, Backbone will hit my sever with an AJAX post request, creating that post. My server will then return a JSON with the "full" post.
Perfect! But now, I want the newly created model to to have the full data. In other words, I don't want it to only have the body attribute. (all my other models have other data).
My question is:
will backbone automatically update the model with the "full" data because my server returned that full JSON?
if not, how can I get Backbone to update that model so its data is full?
Edit: I did this, and it seems like Backbone automatically uses the data returned as the new model. Can someone confirm?
success:function(post){
console.log(post.toJSON()); //Yay! latest version.
},
Yes, the model will be updated with any additional info your server returns.
This is because under the model's create method, there is a call to save, which intern calls model.set within it, in order to update the model with any amended (or new attributes).
As the source code comment for this method states:
If the server returns an attributes hash that differs, the model's state will be set again.