I'm writing a backbone app within an ASP.NET MVC page, and I'm having a truly baffling (to me) problem with using two custom events.
So, the MVC View (Planning.cshtml) has a select control which triggers the Backbone router to fetch a model on change. This model takes a good 10 seconds or so to load, so I want to disable the select while it loads to prevent multiple requests. To do this, I'm having my router trigger two custom events: 'subview-loading' and 'subview-loading-complete', and having my MVC view listen for these events.
The problem I'm having is that the router can hear both events, but Planning.cshtml will only hear the 'subview-loading-complete' event, not the first event.
Planning.cshtml code:
$(document).ready(function () {
var router = new Router({
el: '#TermPlanningReport'
});
var $routerEl = $(router.el);
$routerEl.bind('subview-loading', function() {
console.log('Planning.cshtml heard subview-loading');
//disable control
});
$routerEl.bind('subview-loading-complete', function() {
console.log('Planning.cshtml heard subview-loading-complete');
//enable control
});
});
Router.viewTerm() - the route method loading the model:
viewTerm: function (term) {
var that = this,
termModel = new PlanningTerm({ term: term }),
$thisEl = $(that.el);
//for testing purposes, see if router can hear itself...
$thisEl.on('subview-loading', function() {
console.log('router heard subview-loading');
});
$thisEl.on('subview-loading-complete', function () {
console.log('router heard subview-loading-complete');
});
//trigger loading
$thisEl.trigger('subview-loading');
// fetch data for model
termModel.fetch({
success: function (model, response, options) {
$thisEl.trigger('subview-loading-complete');
//render a vew...
},
error: function (model, response, options) {
$thisEl.trigger('subview-loading-complete');
//render a view...
}
});
},
Finally, my console output:
router heard subview-loading
router heard subview-loading-complete
Planning.cshtml heard subview-loading-complete
The variables $routerEl and $thisEl are both returning the same element properly.
Related
I am currently working with the "NinjaForms" plugin for WordPress, which provides custom form management for the backend. It's based on Marionette / Backbone JS. After some research, I had no problem triggering JavaScript functions on input change and on form submit. However, I have not found a way to fish for an event once the form is initialised / rendered / shown (any of these, really).
What I am doing right now is initialising a Marionette object, adding listeners to a radio and then adding functions to execute it on event:
if(typeof Marionette !== 'undefined') {
var mySubmitController = Marionette.Object.extend( {
initialize: function() {
// init listener
this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction);
// field change listener
this.listenTo( Backbone.Radio.channel( 'fields' ), 'change:modelValue', this.valueChanged);
// submit listener
this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:response', this.actionSubmit );
},
// init action
initAction: function() {
console.log("init");
},
// input update action
valueChanged: function(model) {
console.log("update");
},
// submit action
actionSubmit: function( response ) {
// handled via php
console.log("submit");
},
});
// initialise listening controller for ninja form
new mySubmitController();
}
However, the line this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction); is not working. I have tried the events view:render, view:show, show:view, render:view without success.
I searched in the Backbone / Marionette documentations, but could not find a fitting event. This question might be a duplicate, but I could not really find any topic regarding form initialisation events with Backbone.
after some long search, googling and frustration I've found a solution. Using the following JavaScript-Code, you can execute code on form render:
// if there is a ninja form on this page
if(typeof Marionette !== 'undefined') {
var mySubmitController = Marionette.Object.extend( {
initialize: function() {
// init listener
this.listenTo( nfRadio.channel( 'form' ), 'render:view', this.initAction );
},
// init action
initAction: function() {
// code to execute on form render
},
});
// initialise listening controller for ninja form
new mySubmitController();
}
The "change" event is not firing in the following code.
var PageView = Backbone.View.extend({
el: $("body"),
initialize: function(){
this.model.on("change:loading", this.loader, this);
},
loader: function(){
if(this.model.get("loading")){
this.$el.find('.loader').fadeIn(700);
}
else
this.$el.find('.loader').fadeOut(700);
},
});
var PageModel = Backbone.Model.extend({
defaults: {
loading: null,
},
initialize: function(){
this.set({loading:false});
},
});
$(function(){
var pageModel = new PageModel({});
var pageView = new PageView({model: pageModel});
})
It works if I'm adding this in the model's initialize function:
setTimeout(function() {
this.set({'loading': 'false'});
}, 0);
I can leave it this way, but this is a bug.
The situation explained
Here's the order the code runs:
the model is created,
model's initialize function is called, setting the loading attribute to false,
then the model is passed to the view,
then a listener is registered for the "change:loading"
The event handler is never called because the event never occurs after it was registered.
Quick fix
First remove the set from the model.
var PageModel = Backbone.Model.extend({
defaults: {
loading: null
}
});
Then, after creating the view, set the loading attribute.
var pageModel = new PageModel();
var pageView = new PageView({ model: pageModel });
pageModel.set('loading', false); // now the event should trigger
Since the listener is now registered before the model's loading attribute is changed, the event handler will be called.
Optimized solution
Use Backbone's best practices:
Favor .listenTo over .on to avoid memory leaks
Cache jQuery objects
Try to avoid setting the el property on the view
A view is an atomic component that should only care about itself and its sub-views.
While in your case, it wouldn't matter much that you use the el property on the view, it still goes beyond the responsibilities of the view. Let the calling code deal with passing the element to use for this view.
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;
}
});
Put the defaults where they belong.
var PageModel = Backbone.Model.extend({
defaults: {
loading: false
}
});
Here we choose the body as the element to use for the view, using the el option, and then call render when ready.
$(function() {
var pageView = new PageView({ el: 'body' }).render();
});
The event won't be triggered by the listener right away, instead, we use the render function to put the view in its default state. Then, any subsequent changes of the loading attribute will trigger the callback.
I have listed the most useful answers I've written about Backbone on my profile page. You should take a look, it goes from the beginning to advanced and even provides some clever Backbone components that solves common problems (like detecting a click outside a view).
I had asked a question here that referred me to use using the backbone events. It works great, except that my event listener onFormSubmit() gets called twice. Normally I wouldn't care, but I have a function that toggles some states, and toggling this twice creates a problem.. I thought my view was being rendered twice (based on other answers on SO), but it does not appear to be so. I am trying to understand the 'why' behind what is happening here.. Here is some code (with non-relevant stuff removed)..
Here is my article form view that calls triggers the events on a form save and it gets triggered once (correct intended behavior) and it gets redirected back to the dashboard..
var PostView = Backbone.View.extend({
el: '#content',
articletemplate: _.template($('#article-template-add').html()),
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.articletemplate({}));
},
events: {
"click .save": "savePost",
},
savePost: function() {
var mypost = new PostModel();
this.model = mypost;
this.model.save(null, {
success: function(model) {
eventBus.trigger('formSubmitted', {
message: "form submitted"
});
app.navigate("/", false);
},
});
},
});
Here is my Dashboard view() that gets called after the form submit above.. Here is where onFormSubmit() executes twice (the console.log() gets printed twice).
var DashboardView = Backbone.View.extend({
el: '#content',
dashboardtemplate: _.template($('#dashboard-template').html()),
initialize: function() {
this.listenToOnce(eventBus, 'formSubmitted', this.onFormSubmit);
this.render();
},
onFormSubmit: function(datahere) {
console.log("onFormSubmit called"); // *** This gets printed twice
},
render: function() {
$(this.el).empty().html(this.dashboardtemplate(this.model.attributes));
},
});
Now, I am beginning to think that there might be some problem in the main app routing?
var AppRouter = Backbone.Router.extend({
routes: {
"": "dashboard",
"article/add": "addarticle",
},
dashboard: function() {
mydashview = new DashboardView();
},
addarticle: function() {
var articleView = new PostView();
},
});
var eventBus = _.extend({}, Backbone.Events);
var app = new AppRouter();
Backbone.history.start();
EDIT
I updated the savePost() to include that the trigger is called in the callback of the this.model.save()..I've forced it to create a dummy model instead of taking it from a form. The good news is that I was able to recreate the behavior here: http://jsfiddle.net/okswxngv/ If you open your console, you can see the onFormSubmit called printing twice.
Your problem is linked to the ghost view. Some call it zombie. The DashboardView is created every time you enter the root page, but never removed.
That is why he is going to exist, even if you link a new view to the #content div.
You can put a break point on DashboardView ->initialize and see that is called twice.
To better understand I have changed you code and added a name to the view (which is the date when it was created) and printed this name.
To get read of the problem you have to remove the unneeded view when you create a new one.
I have this functionality associated with clicking a button:
'click .single-speaker-info a': function(ev, speaker){
ev.preventDefault();
Session.set('selectedDocId', this._id);
}
But I'd like it to happen upon hitting this route
Router.route('speaker', {
path:'/speakers/:_id',
template: 'speaker',
data: function(){
return Speakers.findOne(this.params._id);
},
//my attempted solution
selectedDocId: function(){
Session.set('selectedDocId', this._id);
}
});
But I can't find any documentation on how to execute a method on a route.
Here is the Template.helper Im using to get the property Im setting
Template.speaker.helpers({
editingDoc: function(){
return Speakers.findOne({_id: Session.get('selectedDocId')});
}
});
But I can't find any documentation on how to execute a method on a route.
Iron Router offers a number of hooks:
onRun <-- probably what you need
onRerun
onBeforeAction
onAfterAction
onStop
You could use Template.x.rendered, once the page is rendered, any code in that block will be executed. Of course this would not be in your router.
In your case:
Template.speaker.rendered = function() {
//Get data from router
var data = Router.current().data();
Session.set('selectedDocId', data._id);
}
I just don't have idea what causes problem and need help. Before posting I've came up to alternative solution, but I want to learn why this is not working properly.
I have router that initialize view which initialize entity collection and views like so:
advertiser_manage_campaign: function () {
this.campaignListView = new window.CampaignListView;
this.mainSidebar = new window.MainSidebar;
},
CampaignListView:
window.CampaignListView = Backbone.View.extend({
el: ("#right_column"),
initialize: function () {
this.render();
this.campaignCollection = new Campaign.CampaignCollection;
this.campaignCollectionView = new Campaign.CampaignCollectionView({ model: this.campaignCollection });
this.campaignCollection.fetch();
},
events: {
"click .campaign_dialog": "openCampaignDialog"
},
openCampaignDialog: function (e) {
var that = this;
var itemID = $(e.target).attr("item-id");
var model = {}; //model to populate dialog inputs
if (!isNaN(itemID))
model = this.campaignCollection.get(itemID).toJSON(); //get existing model from collection <- after described procedure, error
Campaign.Dialog.open(model, function (data) {
if (isNaN(itemID)) {//model does not exist, create
that.campaignCollection.create(data, { wait: true,
error: function (model, error) {
dialoger.showErrors(JSON.parse(error.responseText).errors);
},
success: function (mdl, response) { window.Campaign.Dialog.close(); }
});
} else {//model exist, update
model = that.campaignCollection.get(itemID);
model.save(data, { wait: true,
error: function (mdl, error) {
dialoger.showErrors(JSON.parse(error.responseText).errors);
},
success: function (mdl, response) { window.Campaign.Dialog.close(); }
});
}
});
return false;
},
render: function () {
$(this.el).html(window.Templates.getHTML("campaign_list_view", {}));
$(".button", $(this.el)).button();
}
});
-
openCampaignDialog
is for both edit models and creating new. Every view(table row) of model
has button with class ".campaign_dialog" and there is button for adding new model with same class.
Campaign.Dialog.open
shows dialog populated with model and in callback returns JSON from dialog form.
If I create new model via dialog, I can edit it right away, but when I create new model, change view, back to this view, create again new model, change view and then again back, click edit on last added item, I get error on commented line as model with this ID is not in collection, although it is. Response from server is OK. Obviously, I'm doing something wrong and after one day, I don't see what it is.
Alternative solution I've came up to is to create and populate dialog from event of model view (this works), but I thought that CampaingCollectionView or CampaingView should not deal with adding or editing models so I've implemented this in 'higher' view.
Thanks everyone for helping me...
Edit:
var CampaignCollectionView = Backbone.View.extend({
el: (".content_table tbody"),
initialize: function () {
this.model.bind("reset", this.render, this);
this.model.bind("add", this.add, this);
},
render: function () {
$(this.el).empty();
_.each(this.model.models, function (campaign) {
$(this.el).append(new CampaignView({ model: campaign }).render().el);
}, this);
return this;
},
add: function (model) {
window.Appender.AppendAndScroll($(new CampaignView({ model: model }).render().el), this.el);
}
});
I've found solution.
Problems arise, though, when we bind objects together through these
events but we don’t bother unbinding them. As long as these objects
are bound together, and there is a reference in our app code to at
least one of them, they won’t be cleaned up or garbage collected. The
resulting memory leaks are like the zombies of the movies – hiding in
dark corners, waiting to jump out and eat us for lunch.
Source: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
Author suggests unbinding mechanism, but I'm going to reuse same objects if exist.
Router:
advertiser_manage_campaign: function () {
if (!this.campaignListView)
this.campaignListView = new window.CampaignListView;
else
this.campaignListView.initialize();
this.mainSidebar = new window.MainSidebar;
},
If someone thinks this is not best solution, I would like to hear why.
Thank you all who tried to help!