JSFiddle - React, Tailwind, and code Playground

by Parth Shah

HTML

<script src="https://www.jsviews.com/download/jsviews.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="result"></div>

<script type="text/x-jsrender" id="CompanyFormTemplate">
    <form class="form-horizontal">
        {^{for Company tmpl="#CompanyDetailsTemplate" /}}
    </form>
</script>

<script type="text/x-jsrender" id="CompanyDetailsTemplate">
    <div class="form-group">
        <label for="Name" class="control-label col-sm-3">Name*</label>
        <div class="col-sm-6">
            <input name="Name" type="text" data-link="Name" class="form-control" />         
        </div>
    </div>
</script>

JavaScript

var app = new CompanyFormContext();

function CompanyFormContext() { 
    this.Company = {
        Name: ''
    };

    this.setCompany = function (company) {
        if (company) {
            $.observable(this).setProperty('Company', company);
        }
    };
};

$(function () {
    initPage(); 

    //...
    var updateRequired = true;
    //...

    if (updateRequired) {
        // we need to update company information

        app.setCompany({ Name: 'Company ABC' });
    }
});

function initPage() {
    $.templates('CompanyFormTemplate', '#CompanyFormTemplate');
    $.link.CompanyFormTemplate("#result", app);
}