JSFiddle - React, Tailwind, and code Playground

by alansouzati

HTML

<div data-bind="with: SubscriptionForm">
    
    <h1>Subscription Form</h1>
    
    <div data-bind="with: SelectPlan">
        <select data-bind="value: data().PlanId">
            <option value="0">Choose a Plan...</option>
            <option value="1">Plano 01</option>
            <option value="2">Plano 02</option>
            <option value="3">Plano 03</option>
        </select>
        <button data-bind="click: CustomizePlan">Create a Custom Plan</button>
    </div>
    
</div>

<div data-bind="with: SubscriptionSummary">
    
    <h1>Subscription Summary</h1>    
    <p>VocĂŞ selecionou o plano <strong data-bind="text: data().PlanId"></strong></p>
    
</div>

JavaScript

function PurchasePlanViewModel() {

    var main = this;
    
    // Global Data
    var data = new function () {
        var data = this;
        data.PlanId = ko.observable(0);
    };

    // SubViewModels

    main.SubscriptionForm = new function () {

        var o = this;

        o.SelectPlan = new function () {

            var oo = this;

            // Data
            oo.data = ko.observable(data);
            
            // ...

            // Methods
            oo.CustomizePlan = function () {
                // do something ...
                alert(oo.data().PlanId());
                oo.data().PlanId(0);
                alert(oo.data().PlanId());
            };
            // ...
        };
    };
    
    main.SubscriptionSummary = new function () {
        
        var oo = this;
        
        // Data
        oo.data = ko.observable(data);
    };
};

ko.applyBindings(new PurchasePlanViewModel());