JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div data-bind='myWith: wrap'>
Content: <span data-bind='text:innards'></span>
</div>
JavaScript
ko.bindingHandlers.myWith = {
init: function(element, valueAccessor, allBindings, viewModel, context) {
// change valueAccessor (an observable) to be extended
return ko.bindingHandlers.with.init(element, valueAccessor, allBindings, viewModel, context);
},
update: function(element, valueAccessor, allBindings, viewModel, context) {
return ko.bindingHandlers.with.update(element, valueAccessor, allBindings, viewModel, context);
}
};
// elsewhere
prototype_data = {
wrap: {
innards: "abc"
}
};
bindings = ko.mapping.fromJS(prototype_data);
ko.applyBindings(bindings);