Removable Component

removable.js

/**
 * A UI element that is removed from the DOM upon bubbling of an
 * event occuring inside its node
 *
 * original use case:
 *  - Remove a list item when a "Delete" form inside it is submitted
 *  - Broadcast that the number of list items has been modified by -1
 */

define(function(require) {
    'use strict';

    var defineComponent = require('flight/lib/component');

    function Removable() {
        this.defaultAttrs({
            'removeOn': 'uiDeleteItem',
            'broadcastEvents': [
                {'event': 'uiRemoved', 'data': {}}
            ],
        });

        this.after('initialize', function() {
            this.on(this.attr.removeOn, this.remove.bind(this));
        });

        this.remove = function(event) {
            var self = this;

            this.attr.broadcastEvents.forEach(function(eventObj) {
                self.trigger(eventObj.event, eventObj.data);
            });

            // Animate row removal, remove DOM node, teardown component
            $.when(this.$node
                .animate({'opacity': 0}, 'fast')
                .slideUp('fast')
            ).done(function() {
                self.$node.remove();
            });
        };
    }

    return defineComponent(Removable);
});

removable.spec.js

describeComponent('component_ui/removable', function () {
    beforeEach(function () {
        setupComponent(
            '<div>The Universe <a href="">Destroy</a></div>',
            {'broadcastEvents' : [ { 'event': 'uiRemoved', 'data': { 'foo' : 'bar' }}]}
        );
    });

    describe('Removable', function() {
        it('broadcasts correct event and data when removeOn event is triggered', function() {
            var spy = spyOnEvent(document, 'uiRemoved');
            this.component.$node.trigger(this.component.attr.removeOn);
            expect(spy.mostRecentCall.data).toEqual({'foo':'bar'});
        });
    });
});