Skip to content

Instantly share code, notes, and snippets.

@orlin
Created Aug 17, 2011
Embed
What would you like to do?
Backbone.history.start() # see index.coffee - error
class exports.RootView extends Backbone.View
el: $ '#container'
template: '_.jade'
initialize: ->
_.bindAll @render
render: ->
$(@el).empty()
$(@el).append jadeify @template
# console.log('root view rendered')
# a piece of browserified express app
# ...
browserify = require 'browserify'
jadeify = require 'jadeify'
bundle = browserify
require: [ 'underscore'
, 'underscore.string'
, 'backbone'
, {jquery: 'jquery-browserify'}
]
entry: ["#{__dirname}/app/index.coffee"]
bundle.use jadeify "#{__dirname}/app/templates",
watch: true
extension: '.jade'
# ...
window._ = require "underscore"
window._.mixin require "underscore.string"
require "./helpers.coffee" # = _.mixin(s)
window.Backbone = require "backbone"
window.jadeify = require "jadeify"
window.onload = ->
# Backbone app bootstrapping
window.app =
models: {}
collections: {}
views: {}
initialize: ->
this.views.home = new (require './views/_view').RootView()
this.router = new (require('./router').ChartraRouter)() # last (it renders upon instantiation)
# app.router.navigate 'home', true if Backbone.history.getFragment() is ''
app.initialize()
# console.log "#" + Backbone.history.getFragment() # ok
# Backbone.history.start() # Uncaught TypeError: undefined is not a function
# {root: '/', pushState: true, silent: true}
# The document is in copletely ready state.
if window.document.readyState is 'complete'
window.onload()
class exports.ChartraRouter extends Backbone.Router
routes:
'': "home"
blank: "blank"
app: window.app
initialize: ->
this.navigate '', true # @home()
# the it
home: ->
@app.views.home.render()
# to illustrate Backbone.history #fail
blank: ->
$('#container').empty()
$('#container').text('blank')
@cjroebuck

This comment has been minimized.

Copy link

@cjroebuck cjroebuck commented Aug 18, 2011

I get the same error when I call Backbone.start with pushState: true.

If you try in firefox, the error becomes '$ is not a function'.

Im also using browserify, and jquery-browserify. Let me know if you get this fixed!

@orlin

This comment has been minimized.

Copy link
Owner Author

@orlin orlin commented Aug 18, 2011

I guess it's because backbone isn't quite browserifiable yet :)
Loding jquery, underscore and backbone through script tags fixed the error. I also stopped using jadeify because of other issues. I still like it for fileify (templates / data) and entry (easy coffee-script for the client side) and maybe other plugins too. Perhaps create a browserify issue if you need this fixed. I've otherwise communicated with @substack about it.

@KrofDrakula

This comment has been minimized.

Copy link

@KrofDrakula KrofDrakula commented Sep 7, 2011

Any luck/feedback on this issue yet?

@cjroebuck

This comment has been minimized.

Copy link

@cjroebuck cjroebuck commented Sep 7, 2011

Yes, actually. You need to first 'npm install jquery', then modify Backbone.js to 'require('jquery')' as in line 35 here: https://github.com/Morriz/backbone-everywhere/blob/master/node_modules/backbone/backbone.js

from this repo: https://github.com/Morriz/backbone-everywhere

@KrofDrakula

This comment has been minimized.

Copy link

@KrofDrakula KrofDrakula commented Sep 7, 2011

Thanks for the pointers. We solved it by patching backbone.js and then using a custom npm module and aliasing that inside browserify. Works like a charm.

@orlin

This comment has been minimized.

Copy link
Owner Author

@orlin orlin commented Sep 7, 2011

I ended up loading backbone (and other libs) via ender. Browserify is still useful within the same project - just not being used to its possible max. Patching backbone.js seems like unnecessary maintenance...

@cjroebuck

This comment has been minimized.

Copy link

@cjroebuck cjroebuck commented Sep 7, 2011

@orlin

This comment has been minimized.

Copy link
Owner Author

@orlin orlin commented Sep 7, 2011

Just keep in mind require(...) is contentious - many would like to claim it. Right now, I require Ender-ed libs first. Browserify requires next.

@thlorenz

This comment has been minimized.

Copy link

@thlorenz thlorenz commented Jan 25, 2013

You don't have to manually patch any libraries to make them browserifiable anymore.
browserify-shim takes care of that for you

Works with all libraries I have encountered so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment