From d102b75cad258b9e46b5a4bda01cf762d4a96615 Mon Sep 17 00:00:00 2001
From: notchris <mail@chrismcgrane.com>
Date: Sun, 20 May 2018 21:41:01 -0400
Subject: [PATCH] Knockout Demo [ci skip] fixes #1061

---
 README.md                       |   9 ++-
 demos/README.md                 |   3 +-
 demos/knockout/README.md        |  68 ++++++++++++++++++++
 demos/knockout/index.html       | 110 ++++++++++++++++++++++++++++++++
 demos/knockout/shim.js          |   1 +
 demos/knockout/xlsx.full.min.js |   1 +
 docbits/00_intro.md             |   2 +-
 docbits/11_demos.md             |   3 +-
 docbits/15_phil.md              |   4 ++
 misc/docs/README.md             |   9 ++-
 10 files changed, 203 insertions(+), 7 deletions(-)
 create mode 100644 demos/knockout/README.md
 create mode 100644 demos/knockout/index.html
 create mode 120000 demos/knockout/shim.js
 create mode 120000 demos/knockout/xlsx.full.min.js

diff --git a/README.md b/README.md
index 34f6e70..c455874 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
 with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
 
 This is the community version.  We also offer a pro version with performance
-enhancements, additional features by request, and dedicated support.
+enhancements, additional features like styling, and dedicated support.
 
 
 [**Pro Version**](http://sheetjs.com/pro)
@@ -191,7 +191,8 @@ The [`demos` directory](demos/) includes sample projects for:
 
 **Frameworks and APIs**
 - [`angularjs`](demos/angular/)
-- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
+- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
+- [`knockout`](demos/knockout/)
 - [`meteor`](demos/meteor/)
 - [`react and react-native`](demos/react/)
 - [`vue 2.x and weex`](demos/vue/)
@@ -303,6 +304,10 @@ space and open much faster!  Even though an XLSX writer is available, other
 format writers are available so users can take advantage of the unique
 characteristics of each format.
 
+The primary focus of the Community Edition is correct data interchange, focused
+on extracting data from any compatible data representation and exporting data in
+various formats suitable for any third party interface.
+
 </details>
 
 ## Parsing Workbooks
diff --git a/demos/README.md b/demos/README.md
index f89ba96..a6fa089 100644
--- a/demos/README.md
+++ b/demos/README.md
@@ -19,7 +19,8 @@ can be installed with Bash on Windows or with `cygwin`.
 
 **Frameworks and APIs**
 - [`angularjs`](angular/)
-- [`angular 2 / 4 / 5 and ionic`](angular2/)
+- [`angular 2 / 4 / 5 / 6 and ionic`](angular2/)
+- [`knockout`](knockout/)
 - [`meteor`](meteor/)
 - [`react and react-native`](react/)
 - [`vue 2.x and weex`](vue/)
diff --git a/demos/knockout/README.md b/demos/knockout/README.md
new file mode 100644
index 0000000..e272536
--- /dev/null
+++ b/demos/knockout/README.md
@@ -0,0 +1,68 @@
+# Knockout 
+
+The `xlsx.core.min.js` and `xlsx.full.min.js` scripts are designed to be dropped
+into web pages with script tags:
+
+```html
+<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:
+
+```js
+var aoa = [ [1,2], [3,4] ];
+```
+
+This neatly maps to a table with `data-bind="foreach: ..."`:
+
+```html
+<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:
+
+```js
+/* 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`:
+
+```js
+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:
+
+```html
+<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](https://ga-beacon.appspot.com/UA-36810333-1/SheetJS/js-xlsx?pixel)](https://github.com/SheetJS/js-xlsx)
diff --git a/demos/knockout/index.html b/demos/knockout/index.html
new file mode 100644
index 0000000..9560631
--- /dev/null
+++ b/demos/knockout/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!-- xlsx.js (C) 2013-present  SheetJS http://sheetjs.com -->
+<!-- vim: set ts=2: -->
+<html ng-app="sjs">
+<head>
+  <title>SheetJS + KnockoutJS</title>
+  <!-- KnockoutJS -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
+
+  <!-- SheetJS js-xlsx library -->
+  <script src="shim.js"></script>
+  <script src="xlsx.full.min.js"></script>
+</head>
+<body>
+<pre>
+<b><a href="https://sheetjs.com">SheetJS + KnockoutJS demo</a></b>
+
+The core library can be used as-is in KnockoutJS applications.
+The <a href="https://github.com/sheetjs/js-xlsx">Community Edition README</a> details some common use cases.
+We also have some <a href="http://sheetjs.com/demos/">more public demos</a>
+
+This demo shows:
+- view model backed by an array of arrays
+- file import that refreshes the model
+- table of editable `input` elements that are bound to the model
+- file export based on the model
+
+<a href="https://sheetjs.com/pres.xlsx">Sample Spreadsheet</a>
+</pre>
+
+<input name="xlfile" id="xlf"  class="left" style="width: 200px;" type="file">
+<table data-bind="foreach: aoa">
+    <tr data-bind="foreach: $data">
+      <td><input data-bind="value: $parent[$index()]"/></td>
+    </tr>
+</table>
+<script id='aoa' type="text/html"></script>
+<button id="export">Export Sheet to XLSX</button>
+
+</div>
+
+<script>
+/* knockout setup */
+var ViewModel = function() {
+  /* use an array of arrays */
+  this.aoa = ko.observableArray([
+    [1,2],
+    [3,4]
+  ]);
+};
+
+var model = new ViewModel();
+ko.applyBindings(model);
+/* do an update to confirm KO was loaded properly */
+model.aoa([[1,2,3],[4,5,6]]);
+model.aoa.push([7,8,9]);
+
+/* set up file input handler */
+(function() {
+  var input_dom_element = document.getElementById('xlf');
+  var rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer
+  function handleFile(e) {
+    var files = e.target.files, f = files[0];
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      var data = e.target.result;
+      if(!rABS) data = new Uint8Array(data);
+      var workbook = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
+      process_wb(workbook);
+    };
+    if(rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
+  }
+  input_dom_element.addEventListener('change', handleFile, false);
+})();
+
+/* update model */
+function process_wb(wb) {
+  /* pull first worksheet */
+  var ws = wb.Sheets[wb.SheetNames[0]];
+  /* convert to AOA */
+  var aoa = XLSX.utils.sheet_to_json(ws, {header:1});
+  /* update model */
+  model.aoa(aoa);
+}
+
+document.getElementById("export").onclick = function() {
+  /* get array of arrays */
+  var data = model.aoa();
+  /* convert to worksheet */
+  var ws = XLSX.utils.aoa_to_sheet(data);
+  /* build new workbook */
+  var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+  /* write file */
+  XLSX.writeFile(wb, "knockout.xlsx")
+};
+</script>
+<script type="text/javascript">
+/* eslint no-use-before-define:0 */
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-36810333-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+</script>
+</body>
+</html>
diff --git a/demos/knockout/shim.js b/demos/knockout/shim.js
new file mode 120000
index 0000000..7ec5819
--- /dev/null
+++ b/demos/knockout/shim.js
@@ -0,0 +1 @@
+../../shim.js
\ No newline at end of file
diff --git a/demos/knockout/xlsx.full.min.js b/demos/knockout/xlsx.full.min.js
new file mode 120000
index 0000000..dbca48d
--- /dev/null
+++ b/demos/knockout/xlsx.full.min.js
@@ -0,0 +1 @@
+../../dist/xlsx.full.min.js
\ No newline at end of file
diff --git a/docbits/00_intro.md b/docbits/00_intro.md
index 9941adf..d9031ba 100644
--- a/docbits/00_intro.md
+++ b/docbits/00_intro.md
@@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
 with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
 
 This is the community version.  We also offer a pro version with performance
-enhancements, additional features by request, and dedicated support.
+enhancements, additional features like styling, and dedicated support.
 
 
 [**Pro Version**](http://sheetjs.com/pro)
diff --git a/docbits/11_demos.md b/docbits/11_demos.md
index a8c23b3..4be16bc 100644
--- a/docbits/11_demos.md
+++ b/docbits/11_demos.md
@@ -4,7 +4,8 @@ The [`demos` directory](demos/) includes sample projects for:
 
 **Frameworks and APIs**
 - [`angularjs`](demos/angular/)
-- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
+- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
+- [`knockout`](demos/knockout/)
 - [`meteor`](demos/meteor/)
 - [`react and react-native`](demos/react/)
 - [`vue 2.x and weex`](demos/vue/)
diff --git a/docbits/15_phil.md b/docbits/15_phil.md
index 30d7a34..7064eb0 100644
--- a/docbits/15_phil.md
+++ b/docbits/15_phil.md
@@ -31,5 +31,9 @@ space and open much faster!  Even though an XLSX writer is available, other
 format writers are available so users can take advantage of the unique
 characteristics of each format.
 
+The primary focus of the Community Edition is correct data interchange, focused
+on extracting data from any compatible data representation and exporting data in
+various formats suitable for any third party interface.
+
 </details>
 
diff --git a/misc/docs/README.md b/misc/docs/README.md
index 67f0d3c..c005728 100644
--- a/misc/docs/README.md
+++ b/misc/docs/README.md
@@ -6,7 +6,7 @@ Emphasis on parsing and writing robustness, cross-format feature compatibility
 with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
 
 This is the community version.  We also offer a pro version with performance
-enhancements, additional features by request, and dedicated support.
+enhancements, additional features like styling, and dedicated support.
 
 
 [**Pro Version**](http://sheetjs.com/pro)
@@ -182,7 +182,8 @@ The [`demos` directory](demos/) includes sample projects for:
 
 **Frameworks and APIs**
 - [`angularjs`](demos/angular/)
-- [`angular 2 / 4 / 5 and ionic`](demos/angular2/)
+- [`angular 2 / 4 / 5 / 6 and ionic`](demos/angular2/)
+- [`knockout`](demos/knockout/)
 - [`meteor`](demos/meteor/)
 - [`react and react-native`](demos/react/)
 - [`vue 2.x and weex`](demos/vue/)
@@ -289,6 +290,10 @@ space and open much faster!  Even though an XLSX writer is available, other
 format writers are available so users can take advantage of the unique
 characteristics of each format.
 
+The primary focus of the Community Edition is correct data interchange, focused
+on extracting data from any compatible data representation and exporting data in
+various formats suitable for any third party interface.
+
 
 ## Parsing Workbooks