Skip to content

Instantly share code, notes, and snippets.

@markusjohnsson
Created August 25, 2017 10:58
Show Gist options
  • Save markusjohnsson/39b9cf195b43fa30051772e7be6eb576 to your computer and use it in GitHub Desktop.
Save markusjohnsson/39b9cf195b43fa30051772e7be6eb576 to your computer and use it in GitHub Desktop.
React knockout binding
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
ko.bindingHandlers.react = {
init: function () {
return {
controlsDescendantBindings: true
};
},
update: async function (element, valueAccessor, allBindings) {
var options = ko.unwrap(valueAccessor());
if (options && options.import) {
var props = options.props == null ? null : isFunction(options.props) ? options.props() : options.props;
var name = options.name || "default";
var constructor = (await import(options.import))[name];
var componentInstance = ReactDOM.render(React.createElement(constructor, props), element);
if (options.callback) {
options.callback(componentInstance);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment