JSFiddle - React, Tailwind, and code Playground

by Kamran Ayub

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="profile well">
    
    <p>
        <label for="firstName">First Name:</label>
        <input type="text" name="firstName" id="firstName" data-bind="value: firstName" />
    </p>
    
    <p>
        <label for="middleName">Middle Name:</label>
        <input type="text" name="middleName" id="middleName" data-bind="value: middleName" />
    </p>
    
    <p>
        <label for="lastName">Last Name:</label>
        <input type="text" name="lastName" id="lastName" data-bind="value: lastName" />
    </p>
    
    <p><strong>Full Name:</strong> <span data-bind="text: fullName"></span></p>
    
    </div>
</div>

JavaScript

// This is a closure that invokes itself, so it immediately runs when the script is loaded
// In the parameters, you pass in "dependencies" of the script. The last parameter is
// undefined.
(function (MyApp, ko, undefined) {
    
    // Namespace
    MyApp.Profile = MyApp.Profile || {};    

    // KO-powered view model
    //
    // This is literally just a function. The reason this is nice
    // is because it does not require the "new" keyword.
    // Instead, you just invoke the function and it will return
    // the "vm" object back to you. This lets you decorate, modify,
    // or change any public-facing method/property from the "class".
    //
    // Douglas Crockford describes this as the functional way of defining
    // "classes". It can also be referred to as the revealing module pattern.
    // I recommend reading Javascript the Good Parts to get acquainted with
    // the different ways of handling object creation.
    //
    // Whatever you want to call it, it is very robust and provides
    // scope protection as well as "polymorphism" capabilities. JS is a
    // dynamic language and you might as well leverage the power of
    // functions to do your bidding.
    //
    // Example:
    //
    //    var myViewModel = MyApp.Profile.PersonalInformation();
    //
    //    myViewModel.extraProp = "foo";
    //
    //    ... pass it on!
    //
    // It's also useful for passing in defaults, options, or other information
    // commonly referred to as a "spec":
    //
    //    var options = { foo: true };
    //    var myViewModel = MyApp.Profile.PersonalInformation(options);
    //
    MyApp.Profile.PersonalInformation = function (spec) {
        // These two declarations are important. These modify the visibility of
        // properties and methods. If you want to expose a method to a consumer,
        // simply attach it to "vm". If you want something to stay private, usable
        // only by this function, attach it to "self".
        //
     ...