Question

I’m new to Backbone and would like some light shed on how I should approach this. I might be not using the right definitions here – sorry in advance!

Currently I have rows of elements that each have a button (I’ll refer to these buttons as button A). These rows are generated as Rails partial. The button opens a popup box that has some controls specific to that row of information. Code-wise, there is only one popup box that adjusts itself + information inside it each time any of the button A is clicked, and it is located in an index.html.erb file.

I want to turn these code into Backbone view object – but I don’t know how to make the pop up box view interact with multiple buttons.

Would a right way to approach this be create a pop-up box per button and let there be multiple pop-up views that communicate with each other? What would be the right approach for this?

Currently, none of these elements are backbone view object.

Thank you in advance.

Answer 1

I’m assuming:

• You’re referring to a modal popup box, not a popup window. If you were trying to change the content of a popup window, you’d simply load a new URL that displays the data you’re expecting.
• All the HTML markup has already been created by your Rails templates
• You’re using jQuery

JSFiddle example: http://jsfiddle.net/4J6fL/

The first step is to create a Backbone.View instance that is responsible for the functionality of your data list.

var DataView = Backbone.View.extend({
    events: {
        // this event will be bound to every button inside our parent element
        "click button": "enlarge"
    },

    enlarge: function(e) {
        // backbone rebinds 'this' to refer to the View. It will not refer to the element 
        // triggering the event as it would in jQuery. Grab a reference to the triggering element.
        $el = $(e.currentTarget);

        // gather the data for our popup window
        var popupData = {
            title: $el.siblings('p').text(),
            img: $el.siblings('img').attr('src')
        };

        this.popup(popupData);
    },

    popup: function(data) {
        // find the view's popup box element - this.$el refers to the views bound DOM element
        var $enlarged = this.$el.find('#enlarged');

        // create new elements based on the data
        var $title = $('<h2 />', { text: data.title });
        var $img = $('<img />', { src: data.img });

        // empty the popup box of current data
        $enlarged.html('');

        // fill the popup box with our new data
        $enlarged.append($title);
        $enlarged.append($img);
    }
});

At this point we have a View which can be bound to any DOM element, giving it the above functionality.

• The events property is responsible for binding event callbacks to the view.
• Be aware of the context of this in your callbacks, Backbone binds it to the View, not the event.
• this.$el refers to the DOM element bound to our view. You’ll see how to do further on.
• The actual popup logic is standard jQuery DOM manipulation.

Now that we have our view, we need to initialize and use it. This is done in the Backbone.Router, which acts as a controller:

dataView = new DataView({ el: $('#data-view') });

Notice how we’re passing the element (el) that will be bound to this view? This is what binds a DOM element to our view, allowing us to manipulate it from within the view.

The next logical step would be to separate the popup code into another view, using events to signal when it should be updated. This would allow you to easily trigger the popup from other areas of your page.