A generic context menu with generically bound events

Question

I've taken a stab at making a context menu using BackboneJS.

Here's the overall structure:

Collections:

• /collection/contextMenuGroups
• /collection/contextMenuItems

Models:

• /model/contextMenu
• /model/contextMenuGroup
• /model/contextMenuItem

Views:

• /view/contextMenuView

To start off, lets take a look at my template:

<script type="text/template" id="contextMenuTemplate">

    <% groups.each(function(group){ %>
        <ul id="group_<%= group.cid %>">
            <% group.get('items').each(function(item){ %>
               <li>
                   <a id="groupItem_<%= item.cid %>" href="#"><%= item.get('text') %></a>
               </li>
            <% }); %>
        </ul>
    <% }); %>

</script>

My template is created such that each contextMenuGroup provided to it creates a new unordered list. Each item in each group creates a link inside of a listItem for the given unordered list.

Here's my view:

define(['contextMenu'], function (ContextMenu) {
    'use strict';

    var ContextMenuView = Backbone.View.extend({

        className: 'contextMenu',

        template: _.template($('#contextMenuTemplate').html()),

        parentSelector: 'body',

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));

            //  Prevent display outside viewport.
            var offsetTop = this.top;
            var needsVerticalFlip = offsetTop + this.$el.height() > $(this.parentSelector).height();
            if (needsVerticalFlip) {
                offsetTop = offsetTop - this.$el.height();
            }

            var offsetLeft = this.left;
            var needsHorizontalFlip = offsetLeft + this.$el.width() > $(this.parentSelector).width();
            if (needsHorizontalFlip) {
                offsetLeft = offsetLeft - this.$el.width();
            }

            //  Show the element before setting offset to ensure correct positioning.
            this.$el.show().offset({
                top: offsetTop,
                left: offsetLeft
            });

            return this;
        },

        initialize: function () {
            //  TODO: If I implement Backbone View's more properly, then 'body' should be responsible for this, but for now this is fine.
            this.$el.appendTo(this.parentSelector);

            var self = this;
            //  Hide the context menu whenever any click occurs not just when selecting an item.
            $(this.parentSelector).on('click contextmenu', function () {
                self.$el.hide();
            });
        },

        show: function (options) {
            if (options.top === undefined || options.left === undefined) throw "ContextMenu must be shown with top/left coordinates.";
            if (options.groups === undefined) throw "ContextMenu needs ContextMenuGroups to be shown.";

            this.top = options.top;
            this.left = options.left;

            this.model = new ContextMenu({
                groups: options.groups
            });

            this.render();
        }
    });

    return ContextMenuView;
});

To display a contextMenu, I call show and pass to show top/left coordinates as well as a model to render inside of the context menu.

Usage:

showContextMenu: function (event, queueItem) {

    var queueContextMenuGroups = [{
        position: 0,
        items: [{
            position: 0,
            text: 'Clear Queue'
        }]
    }];

    if (queueItem) {
        queueContextMenuGroups.push({
            position: 1,
            items: [{
                position: 0,
                text: 'Remove ' + queueItem.get('title')
            }]
        });
    }

    this.contextMenuView.show({
        top: event.pageY,
        left: event.pageX + 1,
        groups: queueContextMenuGroups
    });

    return false;
}

Here, I create an anonymous array of objects (groups) which contains some items to render.

This all works great, but I have no idea how to bind generic events! Should I be extending my ContextMenuView with a 'specific' implementation which can define its events?

Answer 1

I like the code as is,

• Use of 'use strict'
• JsHint cannot find anything
• Readable, well named variables
• No obvious copy pasting or repeated code

As for events, I would

• Wait until everything is rendered
• Add a $.click() to each menu item, item by selecting on a classname used only by those menu items, or you could re-build the id's of each menu item and attach to each one individually ( first approach would be much better ).
• Then I would use $.trigger() to send out an event with the text of the button
• Register whoever needs to know that a menu item was clicked for that event