Permalink
Browse files

more hacking on createRow to support other types of Array implementat…

…ions
  • Loading branch information...
1 parent a0d375e commit c442f99f4f31b3489613903cdbad62d3407acefb @bollwyvl committed Mar 7, 2013
View
@@ -0,0 +1,146 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset='utf-8'>
+ <title>Backbone.js - Handsontable</title>
+
+ <!--
+ Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
+ -->
+ <script src="../lib/jquery.min.js"></script>
+ <script src="../dist/jquery.handsontable.full.js"></script>
+ <link rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css">
+
+ <!--
+ Loading demo dependencies. They are used here only to enhance the examples on this page
+ -->
+ <link rel="stylesheet" media="screen" href="css/samples.css">
+ <script src="js/samples.js"></script>
+ <script src="js/backbone/lodash.underscore.js"></script>
+ <script src="js/backbone/backbone.js"></script>
+ <script src="js/backbone/backbone-relational/backbone-relational.js"></script>
+ <script src="js/highlight/highlight.pack.js"></script>
+ <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
+
+ <!--
+ Facebook open graph. Don't copy this to your project :)
+ -->
+ <meta property="og:title" content="Integrate with Backbone.js">
+ <meta property="og:description"
+ content="Bind your Backbone collections to Handsontable">
+ <meta property="og:url" content="http://handsontable.com/demo/backbone.html">
+ <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
+ <meta property="og:image:type" content="image/png">
+ <meta property="og:image:width" content="409">
+ <meta property="og:image:height" content="164">
+ <link rel="canonical" href="http://handsontable.com/demo/backbone.html">
+
+ <!--
+ Google Analytics for GitHub Page. Don't copy this to your project :)
+ -->
+ <script src="js/ga.js"></script>
+</head>
+
+<body>
+<a href="http://github.com/warpech/jquery-handsontable">
+ <img style="position: absolute; top: 0; right: 0; border: 0;"
+ src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"/>
+</a>
+
+<div id="container">
+
+ <div class="rowLayout">
+ <div class="descLayout">
+ <div class="pad">
+ <h1><a href="../index.html">Handsontable</a></h1>
+
+ <div class="tagline">a minimalistic Excel-like <span class="nobreak">data grid</span> editor
+ for HTML, JavaScript &amp; jQuery
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="rowLayout">
+ <div class="descLayout">
+ <div class="pad bottomSpace850">
+ <h2>Backbone.js</h2>
+ <div id="example1">
+ <p>
+ <a href="http://backbonejs.org/">Backbone.js</a> is a client-side
+ MV* framework that can do some pretty smart things
+ with data going to and coming back from a server. This little
+ example shows how Backbone Models and Collections can work with
+ Handsontable.
+ </p>
+ </div>
+
+ <style>
+ .placeholder {
+ color: #777;
+ font-style: italic;
+ }
+ </style>
+
+ <p>
+ <button name="dump" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">Dump data to console</button>
+ </p>
+ </div>
+ </div>
+
+ <div class="codeLayout">
+ <div class="pad">
+ <div class="jsFiddle">
+ <div class="jsFiddleLink">Edit in jsFiddle</div>
+ </div>
+
+ <script>
+ var CarModel = Backbone.Model.extend({}),
+ CarCollection = Backbone.Collection.extend({
+ model: CarModel
+ }),
+ cars = new CarCollection(),
+ // normally, you'd get these from the server with .fetch()
+ attr = function(attr){
+ return {data: function(car, value){
+ if(_.isUndefined(value)){return car.get(attr);}
+ car.set(attr, value);
+ }};
+ },
+ makeCar = function(obj){
+ return new CarModel(obj);
+ };
+
+ // since we're not using a server... let's try out the schema
+ cars.add({make: "Dodge", model: "Neon", year: 1990});
+ cars.add({make: "Audi", model: "A4", year: 2003});
+ var $container = $("#example1");
+
+ $container.handsontable({
+ data: cars,
+ dataSchema: makeCar,
+ columns: [
+ attr("make"),
+ attr("model"),
+ attr("year")
+ ],
+ colHeaders: ["Make", "Model", "Year"],
+ minSpareRows: 1
+ });
+ </script>
+ </div>
+ </div>
+ </div>
+
+ <div class="rowLayout">
+ <div class="descLayout">
+ <div class="pad"><p>For more examples, head back to the <a href="../index.html">main page</a>.</p>
+
+ <p class="small">Handsontable &copy; 2012 Marcin Warpechowski and contributors.<br> Code and documentation
+ licensed under the The MIT License.</p>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,4 @@
+.idea
+node_modules
+
+.DS_Store
@@ -0,0 +1,2 @@
+test
+node_modules
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011, 2012 Paul Uithol, http://progressivecompany.nl/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Oops, something went wrong.

0 comments on commit c442f99

Please sign in to comment.