JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<button data-bind="click: function() { templateNr(templateNr() == 1 ? 2 : 1); }">Swap template</button>

<h2>Participants</h2>
Here are the participants
<div data-bind="fadeTemplate: { name: 'person-template-' + templateNr(), data: buyer }"></div>
<div data-bind="fadeTemplate: { name: 'person-template-' + templateNr(), data: seller }"></div>
 
<script type="text/html" id="person-template-1">
    <h1>Template 1</h1>
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/html" id="person-template-2">
    <h1>Template 2</h1>
    <p><span data-bind="text: credits"></span></p>
    <h3 data-bind="text: name"></h3>
</script>

JavaScript

ko.bindingHandlers.fadeTemplate = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['template']['init'](element, valueAccessor, allBindings);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        $(element).fadeOut(function() {
            ko.bindingHandlers['template']['update'](element, valueAccessor, allBindings, viewModel, bindingContext);
            $(this).fadeIn();
        });
    }
};

function MyViewModel() {
    this.templateNr = ko.observable(1);
    this.buyer = { name: 'Franklin', credits: 250 };
    this.seller = { name: 'Mario', credits: 5800 };
}
ko.applyBindings(new MyViewModel());