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>
Name: <input data-bind="value: name" type="text"/><br>
Age: <input data-bind="value: age" type="text"/><br>
Evil: <input type="checkbox" data-bind="checked: evil" /><br>

<button id="foo">Change Model!</button>

JavaScript

// create a plain old backbone model
var backboneModel = new Backbone.Model({
    name: "Montgomery Burns",
    age: 102,
    evil: true
});

// use knockback.js to bridge knockout data-binding with backbone models
// read_only is set to false to make the binding two-way.
// note the use of the "kb" api for knockback.
var viewModel = kb.viewModel(backboneModel, {
    read_only: false
});

// at this point, knockback has given us a viewModel which is compatible
// with the normal knockout api.  so we can use the "ko" api now.
ko.applyBindings(viewModel);

$("#foo").click(function() {
    backboneModel.set ({
        "name": "Lisa Simpson",
        "age": 8,
        "evil": false
    });
});