-
-
Save orlin/1151166 to your computer and use it in GitHub Desktop.
| 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') |
Any luck/feedback on this issue yet?
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
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.
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...
Just keep in mind require(...) is contentious - many would like to claim it. Right now, I require Ender-ed libs first. Browserify requires next.
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.
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.