The breakdown of the scenario
Let's dissect how the code sequence unfolds:
- First, the model is initialized,
- Next, the model's
initialize function is executed, setting the loading attribute to false,
- Then the model is handed over to the view,
- A listener for the
"change:loading" event is registered
However, the event handler remains inactive because the specified event never occurs after registration.
Solution at a glance
To resolve this issue promptly, eliminate the set action from the model.
var PageModel = Backbone.Model.extend({
defaults: {
loading: null
}
});
Subsequently, post creating the view, manipulate the loading attribute.
var pageModel = new PageModel();
var pageView = new PageView({ model: pageModel });
pageModel.set('loading', false); // This adjustment should trigger the event now
By ensuring that the listener is established before altering the model's loading attribute, the event handler will be invoked successfully.
An enhanced approach
Adhere to Backbone's recommended methodologies:
- Prioritize
.listenTo instead of .on to prevent memory leakages
- Cache jQuery objects effectively
- Aim to avoid configuring the
el property within the view
A view serves as an independent unit focusing solely on its components and sub-views.
In your specific scenario, though using the el property in the view isn't detrimental, it still extends beyond the expected duties of the view. Delegate the responsibility of designating the element to utilize for this view to the calling script.
var PageView = Backbone.View.extend({
initialize: function() {
this.model = new PageModel();
this.$loader = this.$('.loader');
this.listenTo(this.model, "change:loading", this.loader);
},
loader: function() {
this.$loader[this.model.get("loading")? 'fadeIn': 'fadeOut'](700);
},
render: function() {
this.loader();
return this;
}
});
Place the default values where they belong.
var PageModel = Backbone.Model.extend({
defaults: {
loading: false
}
});
In this case, we designate the body as the chosen element for the view by utilizing the el option, followed by invoking the render function once prepared.
$(function() {
var pageView = new PageView({ el: 'body' }).render();
});
The listener won't respond immediately to the event; instead, we employ the render function to establish the view in its default state. Subsequent modifications to the loading attribute will then activate the callback.
I've compiled a list of the most valuable information I've shared concerning Backbone on my profile page. I recommend exploring it, covering everything from fundamental concepts to advanced techniques, including some ingenious Backbone components for addressing common issues (such as identifying clicks outside a view).