Skip to content

Instantly share code, notes, and snippets.

@alexbihary
Created December 24, 2013 14:49
Show Gist options
  • Save alexbihary/8114314 to your computer and use it in GitHub Desktop.
Save alexbihary/8114314 to your computer and use it in GitHub Desktop.
Knockout debugging binding handler - dump. Will output models/values to the page in <pre> tags.
/*
* Dump binding values onto the page using this HTML syntax:
* <div data-bind="dump: $data"></div>
*/
/* catch and precent cyclical references in rootObject */
function toJSON(rootObject, replacer, spacer) {
var cache = [];
var plainJavaScriptObject = ko.toJS(rootObject);
var replacerFunction = replacer || cycleReplacer;
var output = ko.utils.stringifyJson(plainJavaScriptObject, replacerFunction, spacer || 2);
cache = null;
return output;
function cycleReplacer(key, value) {
if (typeof value === 'object' && value !== null) {
if (cache.indexOf(value) !== -1) {
return; // cycle is found, skip it
}
cache.push(value);
}
return value;
}
}
ko.bindingHandlers.dump = {
init: function(element, valueAccessor, allBindingsAccessor, viewmodel, bindingContext) {
var context = valueAccessor();
var allBindings = allBindingsAccessor();
var pre = document.createElement('pre');
element.appendChild(pre);
var dumpJSON = ko.computed({
read: function() {
var enable = allBindings.enable === undefined || allBindings.enable;
return enable ? toJSON(context, null, 2): '';
},
disposeWhenNodeisRemoved: element
});
ko.applyBindingsToNode(pre, {
text: dumpJSON,
visible: dumpJSON
});
return { controlsDescendentBindings: true };
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment