Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

can't use el: 'body' in View #1

Closed
e6nian opened this Issue Sep 29, 2011 · 5 comments

Comments

Projects
None yet
2 participants

e6nian commented Sep 29, 2011

$ is not defined there.
el: $('body') is ok

Owner

kmiyashiro commented Sep 29, 2011

Can you elaborate on this? Backbone should correctly assign $ for its selector functions as long as jQuery is defined on window. The example code assumes you are assigning the vars in the global namespace.

I just tried out a simple example and it seems to work for me:

Server Side Express

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(browserify({
    require : { jQuery: 'jquery-browserify', backbone: 'backbone-browserify' }
  }));
  app.use(express.static(__dirname + '/public'));
});

Client Side in HEAD

var $ = jQuery = require('jQuery'),
    Backbone = require('backbone');

var myView = Backbone.View.extend({
        el: 'body',
        initialize: function() {
            this.render();
        },
        render: function() {
            $(this.el).html('<h1>oh hi</h1>');
        }
})

$(document).ready(function() {
    var myViewInstance = new myView();
});
Owner

kmiyashiro commented Sep 29, 2011

Wait... are you actually using this package or the original Backbone package? The "$ is not defined" problem is the whole point of this browserify specific package. Make sure you read the updated README for more example code.

npm install backbone-browserify, not npm install backbone.

e6nian commented Oct 1, 2011

I've used npm install backbone-browserify

$ = window.jQuery = require 'jquery-browserify', then everything is OK
but $ = jQuery = require 'jquery-browserify' . then not work :|

Owner

kmiyashiro commented Oct 1, 2011

I see, are you defining those variables in a closure other than window, for example... in another file that is included by browserify? That's what it sounds like. both jquery-browserify and backbone-browserify were meant to be used in the context of window.

In that case you must also define window.$ = window.jQuery = require('jquery-browserify'). This is just how browserify works, it does not pass window as this to the included modules, which is the whole reason I had to make this special package for Backbone. Sounds like everything is working "as expected", which is actually a big problem with Browserify IMO.

@kmiyashiro kmiyashiro closed this Oct 1, 2011

Owner

kmiyashiro commented Oct 1, 2011

I'm about to commit a change where it will always pass this to Backbone, whether this is window or another context is up to you, depending on where you define backbone, ie

function myContext() {
    var Backbone = require('backbone-browserify');
}

... will pass the function myContext as this to Backbone. This should mean that you don't have to specify window.jQuery = when you define jQuery in the same context as Backbone.

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