Dropdown central handler example

ex.html

<div class="trips dropdown auto-complete destination">
                                <div class="element">
                                    <div class="top passive">
                                        <span class="hint">
                                            eg. City Name, Hotel Name, Region Name, etc.
                                        </span>
                                    </div>
                                    <ul class="options overlap">
                                        <li class="top">
                                            <input class="input default" type="text" name="destination" id="destination-input" value="" />
                                        </li>
                                        <li class="separated">
                                            Searching...
                                        </li>
                                    </ul>
                                </div>
                            </div>

ex.js

/*global define */
define([], function () {
    'use strict';

    var $html = $('html');

    var DropdownController = {
        _class: '.dropdown .element',
        _handleClick: function (e) {
            var that = e.data.that,
            $this = $(e.target);
            if($this.closest(".element").length === 0){
                that.hide();
            }
        },
        _set: function (value) {
            this.el.children[0].children[0].innerHTML = value;
            this.$el.find('.options .top .value')[0].innerHTML = value;
        },
        _bindOptions: function () {
            var that = this;
            this.$el.on('click','.action', function (e) {
                that._set(e.currentTarget.innerHTML);
                that.hide();
                e.stopPropagation();
            });
        },
        bind: function () {
            var that = this;
            $html.on('click', this._class, function (e) {
                that.hide();
                if (that.el !== this) {
                    that.show(this);
                }
            });
        },
        show: function (el) {
            this.el = el;
            this.$el = $(el);
            this.$el.addClass('active');
            this._bindOptions();
            $html.off('click', this._handleClick).on('click',{that: this}, this._handleClick);
        },
        hide: function () {
            if (this.$el) {
                this.$el.removeClass('active');
                this.$el.off('click','.action');
                this.$el = null;
                this.el = null;
                $html.off('click', this._handleClick);
            }
        }
    };

    DropdownController.bind();

});