sitDesignMode binding

by bombo

HTML

<!-- ko sitDesignMode: true -->
    <div>
        Text:
        <span data-bind="visible: visible, sitText: lala, sitClick: test"></span>
    </div>
<!-- /ko -->

JavaScript

var sitBindings = {
    sitText: true,
    sitClick: true
};

ko.bindingHandlers.sitDesignMode = {
    init: function (element, valueAccessor, allBindingsAccessor, context, bindingContext) {
        var enabled = ko.utils.unwrapObservable(valueAccessor());
        if (enabled) {
            findSuitableBindingStrings(element, true);
            ko.applyBindingsToDescendants(bindingContext, element);
            return { controlsDescendantBindings: true };
        }
    }
};

ko.bindingHandlers.sitText = {
    update: function (element, valueAccessor) {
        var params = ko.utils.unwrapObservable(valueAccessor());
        if (params && params.sitDesignMode) {
            ko.bindingHandlers.text.update(element, function () { return 'Test value'; });
        } else {
            ko.bindingHandlers.text.update.apply(this, arguments);
        }
    }
};

ko.bindingHandlers.sitClick = {
    init: function (element, valueAccessor, allBindingsAccessor, context) {
        var params = ko.utils.unwrapObservable(valueAccessor());
        if (params && params.sitDesignMode) {
            ko.bindingHandlers.click.init(element, function () { return function () { alert('Clicked in test mode.'); } }, allBindingsAccessor, context);
        } else {
            ko.bindingHandlers.click.init.apply(this, arguments);
        }
    }
};

function findSuitableBindingStrings(node, isFirstNode) {
    var bindings = ko.bindingProvider.instance.getBindingsString(node),
        newBindings = '',
        sitBinding, child, sibling, i;
    if (!isFirstNode && typeof bindings === 'string') {
        for(sitBinding in sitBindings) {
            if (bindings.indexOf(sitBinding) > 0) {
                console.log(bindings);
                if (newBindings.length > 0) {
                    newBindings = newBindings + ', ';
                }
                newBindings = newBindings + sitBinding + ': { sitDesignMode: true }';
            }
        }
        node.setAttribute('data-bind',...