[KnockoutJS] afterRender binding for if binding

This is a custom binding that overrides primitive 'if' binding. afterRender callback will be invoked when the boolean value switched.

HTML

<div data-bind="if: hoge, afterRender: SampleViewModel">
    <h1>This is a test.</h1>
    <p data-bind="text: fuga"></p>
</div>

<pre data-bind="text: testElement"></pre>

JavaScript

// if バインディングに afterRender オプションを追加
var primitive_if_binding = ko.bindingHandlers['if'];
ko.bindingHandlers['if'] = {
    'init': primitive_if_binding.init,
    'update': function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var ret = primitive_if_binding.update(element, valueAccessor, allBindings, viewModel, bindingContext);
        var afterRender = allBindings.get('afterRender');
        if (afterRender && typeof afterRender == 'function') {
            afterRender(element);
        }
        return ret;
    }
}

function SampleViewModel() {
    var self = this;
    self.hoge = ko.observable(true);
    self.fuga = ko.observable("sukobuto");
    self.testElement = ko.observable("");
    
    self.testAfterRender = function(element) {
        self.testElement(element.innerHTML);
    };
};

var vm = new SampleViewModel();
ko.applyBindings(vm);

setInterval(function() {
    vm.hoge(!vm.hoge());
}, 1000);