Skip to content

Latest commit

 

History

History
 
 

knockout

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Knockout

The xlsx.core.min.js and xlsx.full.min.js scripts are designed to be dropped into web pages with script tags:

<script src="xlsx.full.min.js"></script>

Strictly speaking, there should be no need for a Knockout demo! You can proceed as you would with any other browser-friendly library.

Array of Arrays

A common data table is often stored as an array of arrays:

var aoa = [ [1,2], [3,4] ];

This neatly maps to a table with data-bind="foreach: ...":

<table data-bind="foreach: aoa">
  <tr data-bind="foreach: $data">
    <td><span data-bind="text: $data"></span></td>
  </tr>
</table>

The sheet_to_json utility function can generate array of arrays for model use:

/* starting from a `wb` workbook object, pull first worksheet */
var ws = wb.Sheets[wb.SheetNames[0]];
/* convert the worksheet to an array of arrays */
var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
/* update model */
model.aoa(aoa);

Demo

The easiest observable representation is an observableArray:

var ViewModel = function() { this.aoa = ko.observableArray([[1,2],[3,4]]); };
var model = new ViewModel();
ko.applyBindings(model);

Unfortunately the nested "foreach: $data" binding is read-only. A two-way binding is possible using the $parent and $index binding context properties:

<table data-bind="foreach: aoa">
  <tr data-bind="foreach: $data">
    <td><input data-bind="value: $parent[$index()]" /></td>
  </tr>
</table>

The demo shows reading worksheets into a view model and writing models to XLSX.

Analytics