Skip to content

Using isEmpty to check validity of render options breaks openAt functionality #90

@akrawchyk

Description

@akrawchyk

When rendering a modal, you have the ability to pass in options to the render function: https://github.com/awkward/backbone.modal/blob/master/src/backbone.modal.coffee#L23.

Then, these options are tested for existence and emptiness https://github.com/awkward/backbone.modal/blob/master/src/backbone.modal.coffee#L26.

Then, later in the render function, these same options are passed to openAt https://github.com/awkward/backbone.modal/blob/master/src/backbone.modal.coffee#L42.

Consider this example, please assume valid HTML templates for everything. This does not work due to _.isEmpty returning false for the value 1 passed to render. We end up rendering the AddView since options is assigned 0 here https://github.com/awkward/backbone.modal/blob/master/src/backbone.modal.coffee#L26:

var AddView = Backbone.View.extend({ ... });
var EditView = Backbone.View.extend({ ... });

var Modal = Backbone.Modal.extend({
    template: _.template($('#js-modal-template').html()),
    viewContainer: '.bbm-modal__section',
    views: {
        'add': {
            view: AddView
        },
        'edit': {
            view: EditView
        }
    }
});

var modal = new Modal();

// Fails to render modal with `EditView` (e.g. views[1]) triggered, instead triggers `AddView` (e.g. views[0])
$('.edit').on('click', function() {
    $('.modal).html(modal.render(1).el);
});

We can achieve the desired functionality two ways with small modifications to the render call, either by chaining a call to openAt or by passing in an object with an _index key (https://github.com/awkward/backbone.modal/blob/master/src/backbone.modal.coffee#L293) to the call to render:

// Workaround 1
$('.edit').on('click', function() {
    $('.modal).html(modal.render().openAt(1).el);
});

// Workaround 2
$('.edit').on('click', function() {
    $('.modal).html(modal.render({ _index: 1 }).el);
});

The first is less efficient since we are making 2 calls to openAt, once as openAt(0) within the render function, and a second time with the chained call to openAt(1).

The second is OK, just undocumented. Also, the _index key indicates to me it is private which means it could change internally and is therefore unreliable.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions