JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="https://github.com/jquery/jquery-tmpl/blob/master/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<!--
<p>
    <a href="http://www.google.com" target="_blank">Open Google</a>
    <input type="checkbox" name="toggleGoogle" id="toggleGoogle" />
    <label for="toggleGoogle">Toggle enabled</label>
</p>
<p>
    <a href="http://www.microsoft.com" target="_blank">Open Microsoft</a>
    <input type="checkbox" name="toggleMicrosoft" id="toggleMicrosoft" />
    <label for="toggleMicrosoft">Toggle enabled</label>
</p>
-->
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<div data-bind="template: {name: 'linkTemplate', foreach: links }"></div>
<script type="text/x-jquery-tmpl" id='linkTemplate'>
    <p>
        <a href="${url}" target="_blank">${name}</a>
        <input type="checkbox" name="toggle${name}" id="toggle${name}" />
        <label for="toggle${name}">Toggle enabled</label>
    </p>
</script>

CSS

body {
    font-family: georgia, serif;
}

p a {
    width: 130px;
    display: inline-block;
}

JavaScript

var viewModel = {
    links: ko.observableArray([
        { name: "Google", url: "http://www.google.com" },
        { name: "Microsoft", url: "http://www.microsoft.com" }
    ]),
    firstName : ko.observable("Planet"),
    lastName : ko.observable("Earth")
};
viewModel.fullName = ko.dependentObservable(function () {
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
    return viewModel.firstName() + " " + viewModel.lastName(); 
});
ko.applyBindings(viewModel);