Backbone has added exports support as of 0.9.9, so just use the normal Backbone package.
To use Backbone with jQuery, remember to set $ after you require Backbone.
var $ = require('jquery-browserify'); var Backbone = require('../lib/backbone-browserify'); Backbone.$ = $; MyView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); }, render: function() { $(this.el).html('<h1>Oh hi</h1>'); } }); new MyView();
packaged for use with node-browserify.
Removed require('jquery') in Backbone source for $ assignment. Didn't make sense, see #6
npm install backbone-browserify
Important: You must require jquery-browserify, 'br-jquery', or Zepto (untested) with Browserify before you require Backbone, just like normal.
Just add it to your browserify require list and use it! Make sure you also have Underscore installed via npm as Backbone will automatically require it.
browserify({ require : [ 'jquery-browserify', 'backbone-browserify' ] });
... or to alias it to just "backbone":
browserify({ require : { jquery: 'jquery-browserify', backbone: 'backbone-browserify' } });
app.configure(function(){ app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + '/public')); app.use(browserify({ require : { jquery: 'jquery-browserify', backbone: 'backbone-browserify' } })); });
***Include browserify.js like this first: <script src="browserify.js"></script>
var $ = jQuery = require('jquery-browserify'), Backbone = require('backbone-browserify'), MyView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); }, render: function() { $(this.el).html('<h1>Oh hi</h1>'); } }); $(document).ready(function() { var myView = new MyView(); });
... or if you aliased it to 'backbone':
var $ = jQuery = require('jquery'), Backbone = require('backbone'), MyView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); }, render: function() { $(this.el).html('<h1>Oh hi</h1>'); } }); $(document).ready(function() { var myView = new MyView(); });