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 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>
<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.css">
<!-- Same as example 3, except the <select> box expressed as follows: -->
<select id="selectCountries" multiple="true" data-bind="options: availableCountries, 
                   optionsText: function(item) { 
                       return item.countryName + ' (pop: ' + item.countryPopulation + ')' 
                   },optionsCaption: 'Choose...'"></select>

<button id="btnAddNew">add New</button>

JavaScript

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

var viewModel = {
};
ko.applyBindings(viewModel);
viewModel["availableCountries"] = ko.observableArray();

$("#btnAddNew").click(function(){
    viewModel.availableCountries.push({countryName:"India",countryPopulation:100+_.uniqueId()});
});