From d102b75cad258b9e46b5a4bda01cf762d4a96615 Mon Sep 17 00:00:00 2001 From: notchris 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. + ## 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 + +``` + +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 + + + + +
+``` + +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 + + + + +
+``` + +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 @@ + + + + + + SheetJS + KnockoutJS + + + + + + + + +
+SheetJS + KnockoutJS demo
+
+The core library can be used as-is in KnockoutJS applications.
+The Community Edition README details some common use cases.
+We also have some more public demos
+
+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
+
+Sample Spreadsheet
+
+ + + + + + +
+ + + + + + + + + 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. + 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