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">
    <input type="text" data-bind="value: CustomerName, valueUpdate: ['input', 'afterkeydown']" />
    
    <!-- change context -->
    <div data-bind="with: DeliveryAddress">
        <b>Delivery Address</b>
        <[email protected]("_AddressView")-->
        <div>
            <span data-bind="text: CustomerName" ></span></br>
            <input data-bind="value:Country, valueUpdate: ['input', 'afterkeydown']"></input></br>
            <span data-bind="text:Street"></span></br>
            <span data-bind="text:Town"></span></br>
            </hr>
        </div>
    </div>
    <div data-bind="with: InvoiceAddress">
        <b>Invoice Address</b>
        <[email protected]("_AddressView")-->
        <div>
            <span data-bind="text: CustomerName" ></span></br>            
            <input data-bind="value:Country"></input></br>            
            <span data-bind="text:Street"></span></br>
            <span data-bind="text:Town"></span></br>
            </hr>
        </div>        
    </div>

</div>

JavaScript

var Test = Test || {};

Test.AddressViewModel = (function(){
                return function(){
                            this.Country = ko.observable("germany").extend({ rateLimit: 500 });
                            this.Street = ko.observable("TestStreet 1");
                            this.Town = ko.observable("Hannover");
                            this.CustomerName = ko.observable("Max Mustermann");
                };
            })();

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



$(function(){
    var model = new Test.OrderViewModel();

    model.CustomerName.subscribe(function(v){
        model.DeliveryAddress().CustomerName(v);
        model.InvoiceAddress().CustomerName(v); 
    })
    model.DeliveryAddress().Country.subscribe(function(v){
        model.InvoiceAddress().Country(v)
    })
    model.InvoiceAddress().Country.subscribe(function(v){
        model.DeliveryAddress().Country(v)
    })    

    ko.applyBindings(model,document.getElementById("_customerDetailsform"));
})