【knockout.js】 要素の外側のクリックにバインド 【カスタムバインディング】 ref: http://qiita.com/items/9812024fb3b37db68b9c

ko.outerClick.js

/**
 * Custom binding [ outerClick ]
 * 要素の外側のクリックイベントに対してコマンドをバインドする
 *
 * binding-type: function/object
 * binding-object: {
 *  command:    [default:function] 要素の外側がクリックされた際に呼び出されるコールバック関数を指定する。
 *  enable:     true = commandの実行を可能にする。動的バインド可能。
 *              デフォルトは true
 *  inners:     内側として扱う要素をCSSセレクタで指定する。
 *              要素はまず近い親要素から検索され、見つからなければDOM全体から検索される。
 *              デフォルトは false（指定なし）
 *
 * }
 */
ko.bindingHandlers['outerClick'] = {
    init: function(element, valueAccessor) {
        var value = uo(valueAccessor());
        var elm = $(element);
        var config = ko.utils.extend({
            command: dummyCallback,
            enable: true,
            inners: false
        }, (typeof value == 'function' ? {command: value} : value));
        var isInner = false;
        // Bind click event to suppress
        function onInnerClick(e){
            isInner = true;
        };
        elm.click(onInnerClick);
        if (config.inners) {
            var inners = kb.utils.searchNearestElements(config.inners, elm);
            if (inners.length > 0) inners.each(function(inner) {
                $(inner).click(onInnerClick);
            });
        }
        // Bind click elsewhere
        $(document).click(function(e) {
            if (isInner) {
                isInner = false;
                return;
            }
            if (uo(config.enable)) config.command.call(element, ko.dataFor(element), e);
        });
    }
};

view-model_1.js

function AppViewModel() {
    this.showMessage = function() {
        alert("メッセージ")
    }
}
$(function() {
    ko.applyBindings(new AppViewModel());
}

view-model_2.js

function AppViewModel() {
    this.showMessage = function() {
        alert("メッセージ")
    }
    this.showMessageExecutable = ko.observable(true);
}
$(function() {
    var viewModel = new AppViewModel()
    ko.applyBindings(viewModel);
    // ...later
    viewModel.showMessageExecutable(false); // これでメッセージは表示されなくなる
}

view_1.html

<div data-bind="outerClick: showMessage">
    ここをクリックしてもなにも起きません。<br />
    この外側をクリックするとメッセージが表示されます。
</div>

view_2.html

<div data-bind="outerClick: { command: showMessage,
                              enable: showMessageExecutable,
                              inners: '.inner_box' }">
    ここをクリックしてもなにも起きません。<br />
    この外側をクリックするとメッセージが表示されます。
</div>
<div class="inner_box">
    さらにここをクリックしてもなにも起きません。
    なぜならここも inners 指定によって「内側」として扱われるからです。
</div>