Archive for the ‘backbone’ Category

Nginx and Apache rewrites to support HTML5 Pushstate in pure Backbone.js (or other JS MV*) Application.

Posted on May 17th, 2012 in Apache, backbone, nginx | 4 Comments »

HTML5 pushstate is awesome. It enables you to change the URL of your site dynamically without refreshing the page (goodbye hashes!). Libraries like Backbone have great support for this. Unfortunately if a user bookmarks or refresh a page on an app that’s using HTML5 pushstate, it makes a request to the server for that deep linked content. Here are the rewrites for Nginx and Apache to internally redirect that call to the same html file. Browser thinks its a unique page but it’s the same.

Apache

In your vhost :

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

    rewrite ^(.+)$ /index.html last;

Note that once you have this in place your server no longer reports 400 errors as all requests pull up the index page. To work around this you can create a 404 in a Backbone route:

  routes: {
    // Other routes
    "*path"  : "notFound"
  },
 
  notFound: function(path) {
    // Load 404 template, probably of a cute animal.
  }

Common Backbone errors and what they mean.

Posted on October 22nd, 2011 in backbone | 16 Comments »

I’m a big fan of Backbone, the open-source JavaScript MVC framework. It’s lightweight, extendable, has an awesome event model that allows one to bind to changes from just about anything – it’s error messages, however, can be quite cryptic. Simply referencing a missing template file can lead to half an hour of wasted time tracking down the issue. Without further ado here’s a quick list of the day-to-day errors I occasionally encounter and what the problem ended up being:

TypeError: ‘undefined’ is not a function (evaluating ‘func.apply(obj, args.concat(slice.call(arguments)))’)

You probably created an event listener in view that binded to a function that doesn’t exist.

invalid ‘in’ operand attrs

You probably passed a string instead of an object to a Model.set. This frequently happens to me during an ajax callback using jQuery – for some reason Webkit browser return and object while Firefox returns a string.

Uncaught TypeError: Cannot call method ‘replace’ of null (underscore.js:768)

You’re calling an underscore template put not passing in the data it uses in the template. You’re referencing an underscore template that doesn’t exist. You could have created a new template but forgot to change it’s id.

TypeError: ‘undefined’ is not an object (evaluating ‘func.bind’)

You probably set a _bind or _bindAll in your view initiailize code and that method doesn’t exist in this view. Double check for a typo.

TypeError: ‘null’ is not an object (evaluating ‘func.bind’)

In your view you could be binding an event to a callback that got overwritten during initialization. Commen when your model is called “contact” and your model is called the same and gets passed in.

TypeError: ‘undefined’ is not a function (evaluating ‘this._configure(options || {})’) backbone.js #881

Something went wrong in the routing. You may have not instantiated a new view.

Uncaught TypeError: Cannot call method ‘extend’ of undefined (yourfile.js)

Your probably extending an object that extended a backbone object, but the reference to the object is wrong or missing.

Uncaught SyntaxError: Unexpected identifier (underscore.js:782)

Your template logic might have an error in it. Check that you closed open parens and such.

If you’ve experienced a Backbone error that’s not on the list, feel free to post it in the comments.