JSFiddle - React, Tailwind, and code Playground

by kmalakoff

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/jquery/globalize/master/lib/globalize.js"></script>
<script src="https://github.com/jquery/globalize/raw/master/lib/cultures/globalize.culture.fr-FR.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://github.com/kmalakoff/knockback/raw/collection_enhancements/knockback.js"></script>
<!-- ko foreach: planets -->
  <p>First name: <input data-bind="value: first_name" /></p>
  <p>Last name: <input data-bind="value: last_name" /></p>
  <h2>Hello, <span data-bind="text: ko.computed(function(){ return $data.first_name() + ' ' + $data.last_name(); })"> </span>!</h2>
<!-- /ko -->

JavaScript

// Models
var earth = new Backbone.Model({first_name: 'Planet', last_name: 'Earth'});
var mars = new Backbone.Model({first_name: 'Planet', last_name: 'Mars'});

// Collection
var planets = new Backbone.Collection([earth, mars]);

// ViewModel
var view_model = {
  planets: kb.collectionObservable(planets, {view_model: kb.ViewModel})
};

// Bind
ko.applyBindings(view_model);

// Do something then clean up
// kb.utils.release(view_model); view_model = null;