JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-debug.js"></script>
<div id="_customerDetailsform">
    <!-- this is the order context -->
    <input type="text" data-bind="value: CustomerName" />

    <!-- change context -->
    <div data-bind="with: DeliveryAddress">
        <b>Delivery Address</b>
        <[email protected]("_AddressView")-->
        <div>
            <input data-bind="value:Country"></input></br>
            <span data-bind="text:Street"></span></br>
            <span data-bind="text:Town"></span></br>
    
        </div>
    </div>
    <div data-bind="with: InvoiceAddress">
        <b>Invoice Address</b>
        <[email protected]("_AddressView")-->
        <div>
            <input data-bind="value:Country"></input></br>            
            <span data-bind="text:Street"></span></br>
            <span data-bind="text:Town"></span></br>
        </div>        
    </div>

</div>

JavaScript

var Test = Test || {};

Test.AddressViewModel = (function () {
            function AddressViewModel() {
                this.Country = ko.observable("TestStreet 1");
                this.Street = ko.observable("TestStreet 1");
                this.Town = ko.observable("Hannover");
            }
            return AddressViewModel;
        })();

Test.OrderViewModel = (function () {
            function OrderViewModel() {
                this.OrderID = ko.observable(0);
                this.CustomerName = ko.observable("Max Mustermann");
                this.DeliveryAddress = ko.observable(new Test.AddressViewModel());
                this.InvoiceAddress = ko.observable(new Test.AddressViewModel());
            }
            return OrderViewModel;
        })();

$(function(){
    console.log(ko);
    ko.applyBindings(Test.OrderViewModel,document.getElementById("_customerDetailsform"));
})