JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/kmalakoff/knockback/master/knockback.min.js"></script>
<p>
    Your country: 
    <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
</p>
 
<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
    You have chosen a country with population 
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>

<!-- Same as example 3, except the <select> box expressed as follows: -->
<select data-bind="options: availableCountries, 
                   optionsText: function(item) { 
                       return item.countryName + ' (pop: ' + item.countryPopulation + ')' 
                   }, 
                   value: selectedCountry, 
                   optionsCaption: 'Choose...'"></select>

JavaScript

// Constructor for an object with two properties
var country = function(name, population) {
    this.countryName = name;
    this.countryPopulation = population;
};

var viewModel = {
    availableCountries: ko.observableArray([
        new country("UK", 65000000),
        new country("USA", 320000000),
        new country("Sweden", 29000000)
        ]),
    selectedCountry: ko.observable() // Nothing selected by default
};