Question

I’m rather new to Backbone.js development, and have run into a bit of a roadblock while attempting to render a subview.

Currently, I have in place several views to render a custom dropdown-button, as well as other elements. I’ve taken this approach based on DocumentCloud’s code

Here’s what I have so far:

app.ui.SelectMenu = Backbone.View.extend({

    className: 'btn-group group-item',

    options: {
        id: null,
        standalone: false
    },

    events: {
        "click .dropdown-menu a": "setLabel"
    },

    constructor: function (options) {
        Backbone.View.call(this, options);

        this.items = [];
        this.content = JST['common-select_button'];
        this.itemsContainer = $('.dropdown-menu', $(this.content.render()));

        // Add any items that we may have added to the object params
        if (options.items) {
            this.addItems(options.items);
        }
    },

    render: function () {
        this.$el.html(this.content.render({
            label: this.options.label,
            items: this.itemsContainer
        }));
        this._label = this.$('.menu-label');
        return this;
    },

    setLabel: function (label) {
        $(this._label).text(label || this.options.label);
    },

    addItems: function (items) {
        this.items = this.items.concat(items);
        var elements = _(items).map(_.bind(function (item) {
            var attrs = item.attrs || {};
            _.extend(attrs, { 'class': 'menu_item' + (attrs['class'] || '') });

            var el = this.make('li', attrs, item.title);
            return el;
        }, this));

        $(this.itemsContainer).append(elements);
    }
});

So far I have successfully rendered my button, as well as the appropriate label, but I cannot seem to populate the .dropdown-menu when calling the addItems function.

I’m assuming that when render hits, the items variable cannot be populated due to the fact that I am passing a jQuery object and not a string, yet whenever I use items: this.itemsContainer.html(), that simply pastes the html surrounded by quotes… I could simply replace the quotes but that just feels like a hack to me.

Any help would be much appreciated. Thanks!

Answer 1

jQuery’s append doesn’t take an array:

.append( content [, content] )

content: DOM element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
content: One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.

If you want to append multiple elements in one call, you have to supply them as separate arguments:

$(x).append(e1, e2, e3, ...);

so you’d have to use apply to convert your array to separate arguments:

var $i = $(this.itemsContainer);
$i.append.apply($i, elements);

That sort of chicanery really isn’t necessary though, you can add them one by one as you create them:

addItems: function (items) {
    this.items = this.items.concat(items);
    _(items).each(function (item) {
        var attrs = item.attrs || {};
        _.extend(attrs, { 'class': 'menu_item' + (attrs['class'] || '') });

        this.itemsContainer.append(this.make('li', attrs, item.title));
    }, this);
}

Also note that _.each can take a context argument so you don’t need a separate _.bind call. And I’m pretty sure that this.itemsContainer is already a jQuery object so you don’t need to wrap it $() again.

You might have problems with your render as well:

render: function () {
    this.$el.html(this.content.render({
        label: this.options.label,
        items: this.itemsContainer
    }));
    this._label = this.$('.menu-label');
    return this;
}

I suspect that items: this.itemsContainer is going to end stringifying this.itemsContainer, you might have better luck with something like this:

this.$el.html(this.content.render({ label: this.options.label });
this.$el.find('some selector').append(this.itemsContainer);

where 'some selector' would, of course, depend on the HTML structure; you’ll have to adjust the template for this as well.

---

Your Github link is broken so I don’t know what code you’re adapting. I do know that your use of constructor is non-standard. Why not use the standard initialize?

constructor / initialize new View([options])

[…] If the view defines an initialize function, it will be called when the view is first created.

You should probably do it this way:

app.ui.SelectMenu = Backbone.View.extend({
    // No 'constructor' in here or anywhere...
    initialize: function (options) {
        this.items = [];
        this.content = JST['common-select_button'];
        this.itemsContainer = $('.dropdown-menu', $(this.content.render()));

        // Add any items that we may have added to the object params
        if (options.items) {
            this.addItems(options.items);
        }
    },
    //...
});