I can't seem to find any documentation for this and playing around with the code hasn't helped me understand this completely.
I have Backbone model and in my my I bind a handler to the model change event:
var myModel = new ModelA();
var myView = new ViewA({
model: myModel
})
//in my view I have
this.listenTo(this.model, "change", this.handleChange);
Can someone please explain to me what arguments are passed to this.handleChange? I see
there are 2 arguments, model & value, but what are they exactly?
What happens when I bind to a specific attribute, like so:
this.listenTo(this.model, "change:attr", this.handleChange);
When I unset an attribute from the model using myModel.unset("attr");, what are the values passed to handleChange? I see that in some cases value is undefined and sometimes it has 1 attribute unset = true
Any help or point to relevant documentation will be appreciated.
From the code:
Event change:attr:
this.trigger('change:' + changes[i], this, current[changes[i]], options);
Event change:
this.trigger('change', this, options);
So in the first case, the arguments are: the model, the value, and the options used (both external and internal options (for example, unset: true for your unset call)). In the second case, as it doesn't concern a particular attribute, the arguments are: the model and the options.
Related
Disclaimer: I'm new to Backbone.js (coming from AngularJS), so I may have an inaccurate mental model of how this is supposed to work.
I have an object, characterNodes, which I'm making an attribute on my model. characterNodes looks something like this:
var characterNodes = {
character_1: {
stories: [// list of Stories]
},
character_2: {
stories: [// list of Stories]
}
...
}
My Backbone Model looks something like this:
var StoryGraph = joint.dia.Graph.extend({
initialize: function() {
// Call parent constructor
StoryGraph.__super__.initialize.apply(this, []);
this.set('characterNodes', characterNodes);
this.on('change:characterNodes', function() {
alert('test');
});
}
});
Each Story has a property "isUnlocked" which is changed elsewhere in the application. I want to fire an event (ie. that is, the alert 'test' should pop up) whenever this property is changed. With the code as it is above, the event never seems to fire.
I can't get a clear understanding from the Backbone docs whether this is supposed to work - does on('change:characterNodes') fire whenever any property (or sub-property, or sub-sub-property, etc) of characterNodes changes? Or only when the pointer to the object changes, that is, when it's replaced with another object? Or am I doing something else wrong? Thanks!
Backbone doesn't do any magic, basically, the change event is fired only if you set the "characterNodes" to a new object. If you're changing a nested property of that object, Backbone doesn't know it happened. You have three options: a) Change the whole object (e.g. by creating a copy), b) fire the change event manually (m.trigger("change:characterNodes")) whenever you change a nested property, c) Do not use nested objects for this. Have "character1_Stories" as a top level property.
Options c) is preferable. Try to keep properties in your models flat. Option a) is also fine but it has the disadvantage of having to copy the object. Option b) is not recommended. This is because Backbone keeps track of the previous value of the model properties (m.previous("characterNodes")). If you change a nested property, the previous value will have the same reference to the same object as the new value, therefore, it won't reflect its previous state.
Try to call a function instead define the function, and pass the third argument to keep the context call.
Something like this:
this.on('change:characterNodes', this.AlertSomething, this);
Hope it helps.
I took a small code from backbone home site, and consoled the function, in this example, sidebar.on('change:color'), takes the function. but it requires two parameter, one is abiously we need that is 'color', and we defining the element inside the function, still why we giving another parameter as 'model' here, what that parameter does?
if i remove that parameter send only the color, the function doesn't work at all... any one help me to understand this?
sample function here:
var Sidebar = Backbone.Model.extend({
promptColor : function(){
var cssColor = prompt('Please enter a css color');
this.set({color:cssColor});
}
});
window.sidebar = new Sidebar;
sidebar.on('change:color',function(model,color){ // what model parameter do here?
console.log(model);
$('#sidebar').css({
background:color
})
})
sidebar.set({color:'green'});
sidebar.promptColor();
when i console the model i got this:
d
_callbacks: Object
_changing: false
_escapedAttributes: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
changed: Object
cid: "c1"
__proto__: x
It is possible that you want to know which model was affected.
Consider a case where you are listening to an event on a collection instead. Which model's color value was modified? The model parameter tells you this.
Also, consider a case where the same handler is listening to "change:color" on multiple models. Again, you might want to know which model sent the event.
Just like in other event-driven environments, the "sender" is always passed along with the event data. model, in this case, is the sender.
Backbone is a Javascript MVC framework. (Unlike standard MVC, Backbone doesn't have controllers, instead it has collections).
The model you are receiving is a standard model from the MVC paradigm. Model's are the underlying data structures that hold the data that the user is working with.
When you do
sidebar.on('change:color', function(model, color) {
// some code here
});
you are attaching an event handler to the sidebar model. Specifically, you are saying that when the color attribute on this model changes, call the function. Since this event can and will trigger at a later point in time, Backbone passes the event handler function two arguments: the first is the model on which the event fired, and the second is the attribute that changed.
The arguments are passed in a specific order, that is model is the first argument, and the changed attribute is the second. Thus if you omit the model argument from your event handler function, the passed in model gets assigned to color, and color doesn't get assigned to any argument.
Recommended reading:
More about MVC and models
More about backbone models
When I create a new backbone.js model, the attributes from "defaults" are NOT ignored, they become the initial values for my model.
Why are they ignored when I call "clear" on a model.
Is there any reason behind it?
Why should I want a state, where all properties of my model are 0 or ""(spaces) when I have "defaults"?
Can anybody give me a real world example for that?
For instance, in one of my models there is a property called "status". The initial value is "x", but the user can change it to "b" or "u". ""(space) is no valid value. Therefore in the model, I have
defaults: {
"status": "x"
}
In the detail component, where the user can edit the values of a model, he has a button called "erase". When he does that, the model gets the initial state. In this case I will never need a function to set all properties to zero or spaces.
It would have been easy for the backbone.js author to check in the "clear" method, if the model has "defaults", and if so, delete all values and then get the defaults.
Thanks alot in advance
Wolfgang
Had a similar need. Because authors of frameworks don't use them by themselves, they can't foreseen all real world use cases. Better to ask directly https://github.com/documentcloud/backbone
Anyway, it's javascript
Backbone.Model.prototype.resetToDefaults = function() {
this.clear();
this.set(this.defaults);
};
If you don't like it overwrite it!
var Model = Backbone.Model.extend({
clear: function(options) {
Backbone.Model.prototype.clear.apply(this, arguments); // or something like this
return this.set(_.clone(this.defaults));
}
});
and now on you can use your custom model as a basis for all your models
var MyModel = Model.extend({...});
If doing this quick thingy bothers you, you can post this to backbone.js' git issues.
Hope this helps!
Using Backbone.js I know it's highly recommended to set a model's property using the set method, and NOT by directly modifying the attributes internal hash.
However, apart from not firing the "change" event automatically, what other cons or "side-effects" are there in modifying the internal hash directly?
The problem I'm facing is that while the set method takes an object literal, I need to assign the left hand side using a variable determined at run-time. Thanks.
myModel.set({
myProperty : myValue; //myProperty is a variable, so this is invalid syntax
})
//vs
myModel.attributes[myProperty] = myValue; //myProperty is a variable that can be evaluated
Well, if you look at the annotated source code, you'll find that set does a lot.
What if you extended Backbone.Model with a function that does it for you:
Backbone.Model.prototype.setByName = function(key, value, options) {
var setter = {};
setter[key] = value;
this.set(setter, options);
};
Then, you can just do what you want directly on the model:
var model = new Backbone.Model();
model.setByName(myProperty, "bar");
That feels like a better solution to me.
Edit
As #earl3s pointed out, this is no longer necessary in more recent versions of Backbone. Today, you can just call model.set(myProperty, "bar") and it does what you want.
In the annotated source code mentioned by Brian Genisio you can read the following lines:
"Handle both "key", value and {key: value} -style arguments.".
So you can just use model.set(myProperty,"bar",options).
Perhaps they've added this feature after the post of Brian Genisio.. i dunno.
I have a basic collection :
myCollection = Backbone.Collection.extend({
model: myModel
url: '/theurl',
initialize: function(){
this.fetch();
})
})
When initialized, the collection receives items ordered by date.
I would like to be able to dynamically reorder the collection, using another model attribute (name, rating, etc.).
In the view associated with the collection, I tried to bind a click event to a callback like this :
reorderByName: function(){
myCollection.comparator = function(item){
return item.get('name');
});
this.render();
})
Unfortunately, that does not seem to work. Any suggestions as to how I could do it ?
Thanks.
It looks like you've only done half of what you need to do. You've given the collection its comparator, but you've not told it to resort itself. So you need to add something like this statement right before you render:
myCollection.sort();
Note that this will trigger a reset event which would be received by any object that you've bound this event to. If you wish to suppress triggering that event, you could make the call this way:
myCollection.sort({silent: true});
Hope this helps.
I found this while looking for a solution to my own issues with comparator. I thought I would add, in case anyone else finds this question, that if the models in your collections have undefined values for the property by which your comparator is sorting, the sort won't happen. Be sure to use defaults on your model if they're not required and you're gonna sort by 'em. ;)