error handling binding provider

by rniemeyer

HTML

<div style="padding: 15px; margin: 5px; border: 1px solid #DDD;" 
    data-bind="template: { name: template, data: data, afterRender: afterRender }"></div>

<script type="text/html" id="model1">
    <h2>Model #1</h2>
    <hr>
    <font color="red" data-bind="text: name1"></font>
</script>

<script type="text/html" id="model2">
    <h2>Model #2</h2>
    <hr>
    <font color="red" data-bind="text: name2"></font>
    <font color="red" data-bind="text: lastname"></font>
</script>

<script type="text/html" id="model3">
    <h2>Model #3</h2>
    <hr>
    <font color="red" data-bind="text: name3"></font>
</script>

<button data-bind="click: recheckData">re Check On Model1</button>
<button data-bind="click: recheckData2">re Check  On Model2</button>
<button data-bind="click: recheckData3">re Check  On Model3</button>

JavaScript

var ErrorHandlingBindingProvider = function() {
    var original = new ko.bindingProvider(); 

    //determine if an element has any bindings
    this.nodeHasBindings = original.nodeHasBindings;

    //return the bindings given a node and the bindingContext
    this.getBindings = function(node, bindingContext) {
        var result;
        try {
            result = original.getBindings(node, bindingContext);
        }
        catch (e) {
            if (console && console.log) {
                console.log("Error in binding: " + e.message);   
            }
        }

        return result;
    };
};

ko.bindingProvider.instance = new ErrorHandlingBindingProvider();


function model1 (name) {
    this.name1 = name;
    
    this.template = "model1";
}


function model3 (name) {
    this.name3 = name;
    
    this.template = "model3";
}

function model2 (name, lastname) {
    this.name2 = name;
    //this.lastname = lastname; // trigger error binding!
        
    this.template = "model2";
}

var viewModel = {
    data: ko.observable({}),
    template: function() {
        return viewModel.data().template || 'model1'; 
    },
    
    afterRender: function () {
        ///alert('sdfsdf');                    
    },
    
    recheckData2: function() {
        viewModel.data(new model2('zahar', 'zahar'));      
    },
    
    recheckData3: function() {        
        viewModel.data(new model3('IVAN'));  
    },
    
    recheckData: function() {        
        viewModel.data(new model1('zoh'));  
    }
};


viewModel.data(new model1('zoh'));

ko.applyBindings(viewModel);