JSFiddle - React, Tailwind, and code Playground

by rainymaple

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="main">
    <div class="controlsPanel">
    <table>
        <thead>
            <tr>
                <td>Bindings</td>
                <td>Target Value</td>
                <td>Source Value(s)</td>
            </tr>
        </thead>
        <!--Basics-->

        <!--Text, Html-->

        <tr>
            <td>
                <div class="caption">text</div>
            </td>
            <td><span data-bind="text: model.code"></span></td>
            <td><span data-bind="text: model.code"></span></td>
        </tr>


        <!--Input bindings and form fields-->

        <!--Value, valueUpdate-->
        <tr>
            <td>
                <div class="caption">value</div>
                <div class="notes">text input</div>
            </td>
            <td><input type="text" data-bind="value: model.code"/></td>
            <td><span>model.code: </span><span data-bind="text: model.code"></span></td>
        </tr>

        <!--select (dropdown lists)-->
        <tr>
            <td>
                <div class="caption">options</div>
                <div class="notes">select (single selection dropdown)</div>
            </td>
            <td>
                <select data-bind="options: colors, value: selectedColor, optionsText: 'name', optionsValue: 'key'"></select>
            </td>
            <td><span>selectedColor: </span><span data-bind="text: selectedColor"></span></td>
        </tr>
        <tr>
            <td>
                <div class="caption">options</div>
                <div class="notes">select (multiple selection dropdown)</div>
            </td>
            <td>
                <select data-bind="options: colors, selectedOptions: selectedColorsForDropdown, 
                                   optionsText: 'name', optionsValue: 'key'" multiple="multiple"
                ></select>
            </td>
            <td><span>selectedColorsForDropdown:...

CSS

em{font-weight:bold;}
@font-face {
    font-family: 'SansationRegular';
    src: url('../fonts/Sansation_Regular-webfont.eot');
    src: url('../fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Regular-webfont.woff') format('woff'),
         url('../fonts/Sansation_Regular-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLight';
    src: url('../fonts/Sansation_Light-webfont.eot');
    src: url('../fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Light-webfont.woff') format('woff'),
         url('../fonts/Sansation_Light-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBold';
    src: url('../fonts/Sansation_Bold-webfont.eot');
    src: url('../fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Bold-webfont.woff') format('woff'),
         url('../fonts/Sansation_Bold-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {padding : 10px; }
body, input, select {font: 14px 'Segoe UI', 'SansationRegular', Arial, sans-serif;}
.page {    
}
.showroom {
}
.header 
{
    margin-bottom: 20px;
}
span {
    /*font: 12px 'SansationRegular', 'Segoe UI', Arial, sans-serif;*/
    margin: 0 4px 0 4px;
    color: black;
}
/*
ul li span { 
        float: left;
        width: 40px;
}
*/
.alignedCaption {
        float: left;
        width: 40px;
}
/*.text*/
.textValues {
    margin: 0 4px 0 4px;
    color: rgb(47, 123, 163);
}
.caption {
    /*font: 12px 'SansationBold', 'Segoe...

JavaScript

var my = {}; //my namespace
            my.viewmodel = {
                metadata: {
                    pageTitle: "Knockout: Built-In Bindings (dropdown lists)",
                    personal: {
                        link: "http://twitter.com/john_papa",
                        text: "@john_papa"
                    }
                },
                // text/html
                id: ko.observable("123"),
                model: {
                    code: ko.observable("314ce"),
                    name: ko.observable("Taylor 314 ce")
                },

                // value & valueUpdate                
                salePrice: ko.observable(1995),

                // checkboxes and radio buttons
                isInStock: ko.observable(true),
                colors: [
                    { key: "BR", name: "brown" },
                    { key: "BU", name: "blue" },
                    { key: "BK", name: "black"}],
                selectedColorForRadio: ko.observable(),

                // dropdowns
                selectedColor: ko.observable(),
                selectedColorsForDropdown: ko.observableArray([])

            };
            ko.applyBindings(my.viewmodel);