JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="https://plugin.azurewebsites.net/knockout.js"></script>
<div class="container-fluid" style="margin-top: 20px">
    <div class="form-horizontal">

        <div class="control-group">
            <label class="control-label">Email</label>
            <div class="controls">
                <input type="text" class="input-xlarge" data-bind="value: email"/>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">First name</label>
            <div class="controls">
                <input type="text" class="input-xlarge" data-bind="value: firstName" />
            </div>
        </div>
        
        <div class="control-group">
            <label class="control-label">Last name:</label>
            <div class="controls">
                <input type="text" class="input-xlarge" data-bind="value: lastName" />
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Full name:</label>
            <div class="controls">
                <input type="text" class="input-xlarge" data-bind="value: fullName" readonly/>
            </div>
        </div>
        
        <div class="control-group">
            <label class="control-label">Age</label>
            <div class="controls">
                <input type="text" class="input-small" data-bind="value: age" />
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Country</label>
            <div class="controls">
                <select data-bind="options: countries, value: country, optionsText: $data"></select>
            </div>
        </div>

    </div>
</div>



<div id="registration-summary" style="margin-top: 30px; margin-left: 10px;">
    <p data-bind="visible:...

JavaScript

function RegistrationViewModel()
{
    var self = this;
    
    this.email = ko.observable('');
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.computed(function() {
        return jQuery.trim( self.firstName() + " " + self.lastName() );
    }, this);
    this.age = ko.observable('');
    this.country = ko.observable('');
    this.countries = ['', 'Romania', 'England', 'Cyprus' ];

    this.registrationInfo = ko.computed(function() {
        var result  = "";
        if (this.email())
            result += "Email: " + this.email() + "<br/>";
        if (this.firstName())
            result += "First name: " + this.firstName() + "<br/>";
        if (this.lastName())
            result += "Last name: " + this.lastName() + "<br/>";
        if (this.age())
            result += "Age: " + this.age() + "<br/>";
        if (this.country())
            result += "Country: " + this.country() + "<br/>";                
        return result;
    }, this);
}


ko.applyBindings(new RegistrationViewModel());