Simple question: What is the best way to fire an event 'only once'?
I have a Collection in backbone with multiple models. Sometimes multiple models' attributes are updated at once, firing multiple 'change' events on the Collection.
What is the best way to fire the 'change' event only once, grouping all attribute changes together?
My best idea at the moment is using a timer but this will only capture the first model attribute change.
All suggestions, ideas and solutions are valued. Thank you :).
Context:
In this case the event fires a very computationally intensive function, therefore multiple runs must be avoided.
Whenever you are updating the attributes on the models in bulk, pass {silent:true} as an option, which will suppress any events from being fired.
Then trigger a custom event for which a view or multiple views listening to the same.
You can "debounce" the method in your collection that responds to change events, though you'll have to manually figure out which models changed:
Col = Backbone.Collection.extend({
modelChanged: _.debounce(function() {
// handle model changes
}, delayInMs),
initialize: function() {
this.collection.on('change', this.modelChanged, this);
}
})
You can try resetting the collection, rather than adding the elements. See Collection reset method description:
reset collection.reset([models], [options])
Adding and removing models one at a time is all well and good, but sometimes you have so many models to change that you'd rather just update the collection in bulk. Use reset to replace a collection with a new list of models (or attribute hashes), triggering a single "reset" event at the end. Returns the newly-set models. For convenience, within a "reset" event, the list of any previous models is available as options.previousModels.
As documentation says, if you use reset, instead of add you will get a single reset event in the end.
Related
Is there a way to gather more information about the changes from within the Backbone.JS collection change event. What I would like to figure out is whether or not it possible to to know what the collection change was; was a model updated, was one added or removed from the collection and also, for every of these, figure out which one.
Different events
When model is added to collection
collection.on('add',this.someFunc,this);
When a model is removed from a collection.
collection.on('remove',this.someFunc,this);
There is no change event on collection but you need to listen on models change event for change
in model:
initialize:function(){
this.on('change',function(){
this.collection.trigger('change');
});
}
Now on collection you can hear for change event
collection.on('change',this.someFunc,this);
refer this for list of all backbone built-in events
I have a Backbone view which represents a collection. When this collection is synced with the server, and new models are added to the collection, I would like to hide all the view instances that represent these new models in the collection, whilst continuing to display the old models' view instances. How can I do this?
I'm assuming you're using a Marionette.CollectionView or Marionette.CompositeView here, right? That being the case, you are trying to prevent these from showing the newly added models, when the come back from the server and are added to your collection, right?
I can see a few different ways of doing this, most of which begin at the same place: a collection that filters based on an attribute that tells you whether or not to show the model. You would need to have some piece of data on the models that tells you wether to show them or not... I'm not sure what this would look like off-hand, but once you have the logic set up for this, I think the rest of it becomes easier.
A Proxy Collection
My preferred method of handling this in the CompositeView or CollectionView would be to create the view instance with a proxy collection - one that is filtered based on the value to show or hide the models.
I've talked about proxy collections before, and I have a working JSFiddle to show how to build them, here: http://jsfiddle.net/derickbailey/7tvzF/
You would set up a filtered collection like this, and then send the filtered collection to your actual view instance:
var filtered = new FilteredCollection(myOriginalCollection);
filtered.filter({
showThisOne: true
});
var view = new MyCompositeView({
collection: filtered
});
myOriginalCollection.fetch();
From here, it comes down to how you want to manage the filtering and fetch/sync of the original collection. But I think the over-all solution hinges on the proxy/decorator collection and being able to filter the collection down to only the list of items that you want.
Views in Bbone are not automatically updated when the underlying model/collection is changed. You have to explicitly listen for events: change/destroy for models and add/change/remove/reset for collections and call render().
As WiredPrairie suggests, if you've registered during view initialization for example to listenTo() any of these events and explicitly render(), you can always use stopListening() to reverse the effect.
An alternative, in case it's a one-of case of suppressing the view from showing the changes, is to check manually in your view's render() which models have been changed and use the previous state of the changed attributes to avoid showing the new values. Check out: model.hasChanged() and model.previousAttributes() as well as the options.previousModels in case of a collection reset.
When you look into the source code of Backbone.js, version 0.9.2, there is
"_onModelEvent":
This method is responsible of forwarding events from the model to the collection (bubbling up).
So when you change something in a model which is part of a collection (with "set"), there is a change event, and because (in the add method) the _onModelEvent method was bound to the model ("all"), this method gets called.
I also see, that there is a destroy method, which triggers a "destroy" event.
But why does the author (in the first line of the _onModelEvent) check, if the event name is "add" or "remove". Normally there is no "add" event on the model?
I do not understand this.
Can somebody explain it to me?
Thanks in advance
_onModelEvent: function(event, model, collection, options) {
if ((event == 'add' || event == 'remove') && collection != this) return;
With Backbone you can create nested model structures and collections. So you can create a collection where the model is a collection. That is way the check in place:
So from the annotated source:
_onModelEvent:
Internal method called every time a model in the set fires an event.
Sets need to update their indexes when models change ids. All other
events simply proxy through. "add" and "remove" events that originate
in other collections are ignored.
So if you have a collection as a model. It won't delegate the add or remove event if items were added/removed to/from the child collections because in that case only the child collection is changed and not the parent.
I have a Backbone Collection initialized by running collection.fetch() method, and then after a while, I asked the collection to fetch again in order to refresh the models. so, is there any event from Model fired that I can subscribe from View in order to remove/update the view.
There isn't a specific "the collection has been refetched" event but you don't need one. fetch resets the collection:
fetch collection.fetch([options])
[...]
When the model data returns from the server, the collection will reset.
And reset triggers a "reset" event:
reset collection.reset(models, [options])
[...]
Use reset to replace a collection with a new list of models (or attribute hashes), triggering a single "reset" event at the end.
So just listen for "reset" events from the collection and re-render the view when you get one.
The behavior of fetch changed in Backbone 1.0, from the ChangeLog:
Renamed Collection's "update" to set, for parallelism with the similar model.set(), and contrast with reset. It's now the default updating mechanism after a fetch. If you'd like to continue using "reset", pass {reset: true}.
And if we look at set:
set collection.set(models, [options])
The set method performs a "smart" update of the collection with the passed list of models. If a model in the list isn't yet in the collection it will be added; if the model is already in the collection its attributes will be merged; and if the collection contains any models that aren't present in the list, they'll be removed. All of the appropriate "add", "remove", and "change" events are fired as this happens.
So you can say collection.fetch({ reset: true }) if you want to keep using the "reset" event or you can collection.fetch() and listen for individual "add", "remove", and "change" events.
I develop a jquery & backbone.js web app.
One component has an html table and behind this table is a backbone.js collection.
Any change in this collection should lead to an update of the html table, so I write
this.collection.bind("reset add remove", this.renderRows, this);
So I update the html table, when the whole collection gets new, when a new model gets added and when a model gets removed.
There's also a detail view component that gets called when the user hovers and clicks over a certain row of the html table. At the beginning of this component I get the right model out of the collection
changeModel = this.collection.get(id);
After the user has changed some attributes, I do
changeModel.set(attrs);
and return to the html table. The model in the collection has the correct changed values.
But the html table is not updated as none of the 3 events (reset, add, remove) was triggered.
So I added "replace" to the collection binding
this.collection.bind("replace reset add remove", this.renderRows, this);
and before returning from the detail view I called
this.collection.trigger("replace");
My solution works, but my question is:
Is there any "native" backbone.js solution that is already there and that I have missed and where I do not have to trigger something by myself?
The change events from models bubble up to the collection. (Collection's _onModelEvent -function in the annotated source. The method just basically takes all events from models and triggers them on the collection.
This leads to
Model attribute is set
Model triggers change
Collection catches change
Collection triggers change
So
this.collection.bind("replace reset add remove", this.renderRows, this);
has to be replaced with this
this.collection.bind("change reset add remove", this.renderRows, this);
P.S.
My personal opinion is that you shouldn't redraw the whole table if just one model is changed. Instead make each table row a view in itself that has the corresponding model as its model and then react to attribute changes there. There is no point in redrawing 500 table cells if you're targeting just one.
UPDATE
And nowadays you should use the on -method for binding to events.
collection.on("change reset add remove", this.renderRows, this);
If you're using BB 1.0, and this event is being listened to within a View, I suggest moving to use the new listenTo to bind into events, which also allows for easy unbinding when calling view.remove(). In that case you should do:
// assuming this is the view
this.listenTo(collection, "change reset add remove", this.renderRows);