Backbone.js - Modify already rendered page


I'm trying to learn the jade template system and backbone.js in the context of a (relatively simple) node.js webapp. I'm using express.js as my framework. Anyway, backbone.js looks really interesting and powerful, but I don't want to render my clients on the client side.

I'd rather render server-side with node and jade, send the client the rendered page, and just modify live content using backbone. What's the best way to go about this? In other words, what's the best way to use backbone with a page that's already rendered and structured? I realize that I'm not leveraging backbone to it's full power, but I'm pretty much just trying to use backbone rather than a bunch of jQuery selectors and event handlers.

Problem courtesy of: mschallert


Your backbone view can reference an existing DOM element by passing a reference to the element as el when instantiating the view.

var myViewInstance = new MyViewClass({el: $('#existingDOMElement')});

Any event handlers you have declared in your view class will be bound to any child elements matching the event selectors. Ex:

        <div id='myView'>
            <a class='foo'>Foo</a>

            var MyViewClass = Backbone.View.extend({
                events: {
                    'click .foo': 'fooClicked'
                fooClicked: function(e) {
                    console.log('.foo clicked');

            new MyViewClass({el: $('#myView')});

Solution courtesy of: rr.


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.