Knockout catching errors
http://brianmhunt.github.io/articles/knockout-catching-errors/
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div id='X'>
<h1>Sample of errors</h1>
<h2>A binding that does not exist</h2>
<div data-bind='html: obs'></div>
<h2>A binding init throws an error</h2>
<div data-bind='throws: obs'></div>
<h2>When no error occurs</h2>
<div data-bind='text: obs'></div>
</div>
CSS
/* [data-bind] */.binding-error {
border: 4px dashed red;
background-color: #F88;
}
/* [data-bind] */.binding-error:after {
font-size: 16px;
color: red;
background-color: white;
padding: 2px 0.5em;
border: 1px solid gray;
font-style: italic;
content: "This item may not be working as expected.";
}
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();