Knockout-handsontable is a binding for Knockout.js designed designed to connect observableArrays with handsontable. This allows handsontable to bind to the knockout viewmodel to communicate with the handsontable and the handsontable to communicate with observables or variables.
Basic Usage
$(document).ready(function (fname, lname, sex, phone) {
function Person() {
var self = this;
self.fname = ko.observable(fname);
self.lname = ko.observable(lname);
self.info = {sex: sex, phone: phone}
}
function exampleVM() {
self.listOfPersons = ko.observableArray([]);
self.listOfPersons.push(new Person('Cave', 'Johnson', 'Male', '555-5555'));
self.listOfPersons.push(new Person('Caroline', '', 'Female', '652-4556'));
self.listOfPersons.push(new Person('Morality', 'Core', 'none', '555-5555'));
}
//window.AppVM = new AppViewModel();
ko.applyBindings(new exampleVM());
});
<div class="handsontable" data-bind="handsontable: {
data: listOfPersons(),
colHeaders: ['First Name', 'Last Name', 'Sex', 'Phone'],
columns: [
{data: 'fname'},
{data: 'lname'},
{data: 'info.sex'},
{data: 'info.phone'}
]
}"></div>View the sample in jsFiddle here: http://jsfiddle.net/calvinslusarski/x3ejL/161/