Knockback: Knockout & Backbone

Simple demo of 2-way data binding using Knockback, which bridges the structure of Backbone with the data-binding magic of Knockout.

by phsiao2000

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>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!-- from http://jsfiddle.net/geekdave/bjUBq/ -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">knockback.js and bootstrap</a>
            <ul class="nav">
                <li><a href="#">knockback</a></li>
                <li><a href="#">bootstrap</a></li>
            </ul>
        </div>
    </div>    
</div>
<div class="well">
    <label>Name: </label>
    <input data-bind="value: name" type="text" class="input" placeholder="name"/>
    <label>Age: </label>
    <input data-bind="value: age" type="text" class="input" placeholder="age"/>
    <h6>click button when done</h6>
    <button id="foo" type="submit" class="btn btn-primary">Change Model!</button>
</div>

CSS

h6 {margin-bottom:6px;}

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
    });
});