We Keep Coding

Backbone add ? after page url when an error occurred

I am experiencing a strange error when I run my code. I am using an application with Backbone.js and RequireJS. The problem arises when there is an error in the code (any), seems that a backbone or jquery redirect to the url existing adding a question mark ? at the end of the page name:
URL before the error: http://localhost/home#users
URL after the error : http://localhost/home?#users
This causes the page to refresh. Anyone know why this behavior?
This is my code:
var myView = Backbone.View.extend({
events: {
'click button#lookUp':'lookUp'
},
lookUp: function(){
//Force error to show the error calling a function does not exist
this.triggerSomeError();
}
});
Router:
var navigate = function(url) {
appRouter.navigate(url, {
trigger: true
});
}
var initialize = function(){
appRouter = new AppRouter;
Backbone.history.start();
}
Html:
<button class="alinear-btn btn btn-primary" id="lookUp">Imprimir</button>
Chrome developer console:

This is a pretty common error that we've run into. You need to change your code to the following:
var myView = Backbone.View.extend({
events: {
'click button#lookUp':'lookUp'
},
lookUp: function(event) {
event.preventDefault();
//Force error to show the error calling a function does not exist
this.triggerSomeError();
}
});
By default an event object is passed to a function called from the events collection, and you need to use this to prevent the default behavior. You can name the parameter whatever. I just typically call it event to be explicit.
What you are actually suppressing here is the default behavior of that button in the browser, which is to do a form submit. When you do a form submit in the browser it tries to take everything that's in the form and append it on to the url as query parameters. In this case the button is not in any form and so it's basically appending nothing and just putting the question mark for the query parameters.
The reason you got down votes and the reason you're getting an error is because you didn't create a method in your view called triggerSomeError() so of course you're going to get an error on that. However that's completely independent and has nothing to do with what's going on with your url path.

Views not rendered after transition event

I'm currently trying to build an app using backbone, require.js & jqm. I'm new to jquery mobile an I'm having strange rendering issues and I'm not able to track them down or fix them. So my question remains on a rather nebulous and phenomenal level - hopefully someone can help me out here. I've the feeling that I understood something wrong here.
So here's what I do:
Basically I'm using the router facilities of backbone.js and disabling all routing capabilities of jqm. Using (in main.js):
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
After that I use the routing technique proposed by Christophe Coenraets on his blog. Which basically looks like this:
var AppRouter = Backbone.Router.extend({
// Router constructor
initialize: function(){
this.loginView = new LoginView(this);
this.registerView = new RegisterView(this);
this.user = new User(this);
// Tell Backbone to listen for hashchange events
Backbone.history.start();
},
// Define routes
routes: {
'': 'home',
'login' : 'login',
'registration' : 'registration',
},
/// Define route actions ///
// Home route
home: function() {
this.user.isUserLoggedIn();
},
// Login route
login: function() {
console.log("Welcome to the router - login route.");
this.changePage(this.loginView);
},
registration:function() {
console.log("Welcome to the router - registration route.");
this.changePage(this.registerView);
},
changePage:function (page) {
$("body").empty();
$(page.el).attr('data-role', 'page');
$("body").append($(page.el));
page.render();
$(":mobile-pagecontainer").pagecontainer("change", $(page.el), {transition: "pop", changeHash: false, reverse: false});
}});
Basically I've to views: The Login & RegisterView at the moment. When I naviagte to the RegisterView it works fine, but navigating backwards to login I can see the transition ("pop") - but after the transition the content is not shown in the browser. It is present in the DOM but I figures out that certain css classes are missing for example "ui-page-active" on the data-role="page". When I apply that class manually I can see the LoginView but all events are lost (a click on the registration tab does not trigger anything).
I've the feeling that there is a conceptual misunderstanding on my side and I'm not able to figure out where the problem resides. I tried things like .trigger("create") but that looked rather like a helpless tryout than anything else.
I've set up a GitHub-Repository. I'm thankful for any help - thanks in advance and sorry for the confused question.
EDIT: Yeah... and here also the link to the repo.

I figured out, that I placed the configuration to prevent jqm in the wrong place. It has to reside in main.js before the actual app is loaded:
require(["jquery"], function( $ ){
$( document ).one( "mobileinit", function() {
//Set your configuration and event binding
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
require([
// Load our app module and pass it to our definition function
'app',
], function(App){
// The "app" dependency is passed in as "App"
// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
App.initialize();
});
});
Thanks for the help anyways.

Jasmine Testing Fancybox in Backbone - Spied Methods incorrectly passing through

I have a modal login view that I'm testing with Jasmine. I have a nasty problem testing that the login button redirects. I've put the redirect in a method so that I can mock it and test the call but when I trigger the click event on the sign in button the spy seems to be ignored.
Here's the view I'm testing...
define(['ministry', 'models/m-auth', 'helpers/cookie-manager', 'text!templates/modals/login.html', 'jquery.custom'],
function (Ministry, Authentication, CookieManager, TemplateSource) {
var loginView = Ministry.SimpleView.extend({
name: 'Login',
el: "#popupLoginWrapper",
template: Handlebars.compile(TemplateSource),
events: {
'submit #loginForm': 'signIn'
},
redirectToOrigin: function () {
// TODO: Change location to member home when implemented
location.href = '/#/jqm';
},
signIn: function (e) {
var that = this;
e.preventDefault();
// As we have no input yet log in manually using the auth model...
var authData = new Authentication.Request({
requestSource: $('#requestSource').text(),
apiKey: $('#apiKey').text(),
username: '*****',
password: '*****'
});
// This saves the login details, generating a session if necessary, then creates a cookie that lasts for 1 hour
authData.save(authData.attributes, {
success: function () {
if (authData.generatedHash !== undefined && authData.generatedHash !== null && authData.generatedHash !== '')
CookieManager.CreateSession(authData.generatedHash);
that.redirectToOrigin();
}
});
},
});
return loginView;
});
(It currently logs in with a hard coded account - wiring up the actual controls is the next job). And here's the test in question (I've combined all the before and afters into the test for simplicity here)...
var buildAndRenderView = function (viewObject) {
viewObject.render();
$('#jasmineSpecTestArea').append(viewObject.el);
return viewObject;
};
it("signs in when the 'Sign In' button is clicked", function () {
spyOn(objUt, 'redirectToOrigin').andCallFake(Helper.DoNothing);
spyOn(Backbone.Model.prototype, 'save').andCallFake(function (attributes, params) {
params.success();
});
$('body').append('<div id="jasmineSpecTestArea"></div>');
$('#jasmineSpecTestArea').append('<section id="popupLoginWrapper"></section>');
objUt = new View();
buildAndRenderView(objUt);
objUt.$('#loginForm button').click();
expect(objUt.redirectToOrigin).toHaveBeenCalled();
$('#jasmineSpecTestArea').remove();
});
Some brief justification: I do the vast majority of my views as independent components that I then render in a custom view variant called a Region (modeled on Marionette) - I generally find this to be a nice tidy practice that helps me keep track of what sits where in the app separately from what is held in a given 'space'. This strategy doesn't seem to work with fancybox modals, such as this, so the render takes place in a hidden existing DOM element and is then moved into the region, hence the need for the code to append 'popupLoginWrapper' into the test area.
The same test above will also fail if I call the sign in method directly with empty event arguments. Jasmine gives me the following error 'Error: Expected a spy, but got Function.' (Which makes sense, as it's calling the actual implementation of redirectToOrigin rather than the spy.
I have similar tests which pass, and the issue seems to be around the triggering of params.success(), but this is necessary to the test.
ADDITIONAL: After disabling the test, I found this issue affecting most of the tests for this modal. By stepping through, I can see that the spy is applied and the spy code is executed in some cases, but then the real success call seems to then be triggered afterwards.

I seem to have fixed this issue - I'm not strictly sure how; I just approached it completely fresh a few days later - The test now looks like this...
var buildAndRenderView = function (viewObject) {
viewObject.render();
$('#jasmineSpecTestArea').append(viewObject.el);
viewObject.postRender();
return viewObject;
};
it("signs in when the 'Sign In' button is clicked", function () {
$('body').append('<div id="jasmineSpecTestArea"></div>');
$('#jasmineSpecTestArea').append('<section id="popupLoginWrapper"></section>');
objUt = new View();
spyOn(objUt, 'redirectToOrigin').andCallFake(Helper.DoNothing);
spyOn(objUt, 'displayError').andCallFake(Helper.DoNothing);
spyOn(Backbone.Model.prototype, 'save').andCallFake(function (attributes, params) {
params.success();
});
objUt = buildAndRenderView(objUt);
objUt.$('#loginForm button').click();
expect(objUt.redirectToOrigin).toHaveBeenCalled();
expect(objUt.displayError).not.toHaveBeenCalled();
$('#jasmineSpecTestArea').remove();
});
The displayError call was added as I'd wrapped the error alert mechanism since the initial issue, so isn't particularly relevant. I split some variable sets into a postRender after fixing the test, so that is also not relevant.
The problem seemed to be calling the buildAndRenderView method without the return value being set to the object. By changing this...
buildAndRenderView(objUt);
to...
objUt = buildAndRenderView(objUt);
the issue resolved itself.

backbone collection events not firing. Am I missing something?

I'm trying to make a preloader and getting caught at step one with backbone. I've built a nice one before using jquery and also with 'raw' js basically what happens is that I have a folder called img/ui and a server side script that just gives a JSON dump of that folder. This request is /preload the js then queues this and loads them one by one based upon a process of load events with timeouts & error handlers.
What I'm trying to is port this to Backbone. The pattern I thought was a collection which loads the JSON build a set of models for each of the assets then a single view attached to the collection to display the status of the queue...... simple.
But I'm already stuck.. first I have to manually fetch the JSON or it wont do anything.. fine.. done, second even when the JSON is loaded it wont fire the parse method (or any other):
var PreloaderCollection = Backbone.Collection.extend({
model:PreloaderModel,
url:"/preload",
events: {
"change":"parse"
},
initialize: function()
{
_.bindAll(this);
this.fetch(this.url);
},
setup: function(args)
{
},
update: function(args)
{
},
parse:function(args){
log(args)
},
remove: function(args)
{
}
});
I'm really starting to get frustrated with Backbone, It's my first major project and despite reading about every tutorial and fully going through the source there seems to be so much contradiction about the pattern and capabilities.
EDIT:
This was a last resort and feels very dirty but here's how I 'bypassed' the issue.
I essentially overrode the fetch function with my own like so, which now works but... hmm,
var PreloaderCollection = Backbone.Collection.extend({
url:"/preload",
events: {
"reset":"parse"
},
initialize: function()
{
log("initing preloader collection")
_.bindAll(this);
this.bind("change",this.parse)
this.fetch(this.url);
},
fetch:function(args){
$.getJSON(
args,
this.parse
)
},
setup: function(args)
{
},
update: function(args)
{
},
parse:function(args){
log("parse",args)
},
remove: function(args)
{
}
});

you are using the wrong way of binding to your events :)
whith the event's hash, you declare all events jquery need to bind to elements in the DOM, on your view.
in a model, or collection you bind to reset / change / error events like this:
var myModel = Backbone.Model.extend({});
var myCollection = Backbone.Collection.extend({
model: myModel,
initialize: function() {
this.bind('reset', this.parse, this)
},
parse: function() {
alert('parsing');
}
});
var c = new myCollection({});
c.reset([{name: 'name1'}, {name: 'name2'}]);
see more info on eventbinding here: http://documentcloud.github.com/backbone/#Events-bind
see more info on the delegateEvents you were trying to use, but are only meant to be used in a view for DOM element event binding: http://documentcloud.github.com/backbone/#View-delegateEvents
see jsfiddle for a working version: http://jsfiddle.net/saelfaer/kt2KJ/1/

The event to listen for after fetching is reset. So for actin on that you will have to write:
events: {
"reset":"parse"
}
The documentation for fetch can be found on the backbone page:
http://documentcloud.github.com/backbone/#Collection-fetch

Event triggered multiple times after using back button in Backbone.js

I'm building a Backbone app and I came across this weird issue. In the state A (route: ""), I've got a view like that:
var view = Backbone.View.extend({
events : {
"click a.continue" : "next"
},
next : function(e) {
//Some stuff
Backbone.history.navigate("/page2");
}
});
and once I click on the anchor with "continue" class, I am redirected to a state B (route: "/page2"). If I click on the back button of my browser, and then I click on the anchor, debugging I've noticed that the next function is triggered twice. Actually if I keep going back and forth the number of times the event is triggered keeps increasing.
Any clue?

You've got a zombie view hanging around.
The gist of it is that when you are instantiating and displaying the second view ("state B"), you are not disposing of the first view. If you have any events bound to the view's HTML or the view's model, you need to clean those up when you close the form.
I wrote a detailed blog post about this, here: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
Be sure to read the comments as "Johnny O" provides an alternative implementation which I think is quite brilliant.

I Have the same problem, the solution is...
App.Router = Backbone.Router.extend({
routes: {
"fn1": "fn1",
"fn2": "fn2"
},
stopZombies: function(objView){
if(typeof objView === "object"){
objView.undelegateEvents();
$(objView.el).empty();
}
},
fn1: function(){
this.stopZombies(this.lastView);
var view1 = new App.v1();
this.lastView = view1;
},
fn2: function(){
this.stopZombies(this.lastView);
var view2 = new App.v2();
this.lastView = view2;
}
});
Store the last execute view in this.lastView, then stopZoombies() remove the events from this view.