JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<div data-bind="withProperties: { emotion: 'happy' }">Today I feel <span data-bind="text: emotion"></span>.
    <!-- Displays: happy -->
</div>
<div data-bind="withProperties: { emotion: 'whimsical' }">Today I feel <span data-bind="text: emotion"></span>.
    <!-- Displays: whimsical -->
</div>
<div data-bind="withProperties: { emotion: 'smart' }">Today I feel <span data-bind="text: emotion"></span>.
    <!-- Displays: smart -->
</div>

JavaScript

// Code goes here

$(document).ready(function () {
    ko.bindingHandlers.withProperties = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            // Make a modified binding context, with a extra properties, and apply it to descendant elements
            var newProperties = valueAccessor(),
                childBindingContext = bindingContext.createChildContext(viewModel);
            ko.utils.extend(childBindingContext, newProperties);
            //ko.applyBindingsToDescendants(childBindingContext, element);

            // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
            return { controlsDescendantBindings: false };
        }
    };

    var viewModel = {
        //Replacement: ko.observable("Replacement")
    };
    ko.applyBindings(viewModel);
});