PageRenderTime 52ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/demo/backbone.html

https://gitlab.com/e0/handsontable
HTML | 228 lines | 177 code | 39 blank | 12 comment | 0 complexity | 9147349199cec7c49d38cb5d0f39472a MD5 | raw file
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'>
  5. <title>Backbone.js - Handsontable</title>
  6. <!--
  7. Loading Handsontable (full distribution that includes all dependencies)
  8. -->
  9. <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
  10. <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
  11. <script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
  12. <script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
  13. <script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
  14. <script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
  15. <script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
  16. <script data-jsfiddle="common" src="../dist/handsontable.js"></script>
  17. <!--
  18. Loading demo dependencies. They are used here only to enhance the examples on this page
  19. -->
  20. <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  21. <script src="js/samples.js"></script>
  22. <script data-jsfiddle="common" src="js/backbone/lodash.underscore.js"></script>
  23. <script data-jsfiddle="common" src="js/backbone/backbone.js"></script>
  24. <script data-jsfiddle="common" src="js/backbone/backbone-relational/backbone-relational.js"></script>
  25. <script src="js/highlight/highlight.pack.js"></script>
  26. <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  27. <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
  28. <!--
  29. Facebook open graph. Don't copy this to your project :)
  30. -->
  31. <meta property="og:title" content="Integrate with Backbone.js">
  32. <meta property="og:description"
  33. content="Bind your Backbone collections to Handsontable">
  34. <meta property="og:url" content="http://handsontable.com/demo/backbone.html">
  35. <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  36. <meta property="og:image:type" content="image/png">
  37. <meta property="og:image:width" content="409">
  38. <meta property="og:image:height" content="164">
  39. <link rel="canonical" href="http://handsontable.com/demo/backbone.html">
  40. <!--
  41. Google Analytics for GitHub Page. Don't copy this to your project :)
  42. -->
  43. <script src="js/ga.js"></script>
  44. </head>
  45. <body>
  46. <div class="wrapper">
  47. <div class="wrapper-row">
  48. <div id="global-menu-clone">
  49. <h1><a href="../index.html">Handsontable</a></h1>
  50. </div>
  51. <div id="container">
  52. <div class="columnLayout">
  53. <div class="rowLayout">
  54. <div class="descLayout">
  55. <div class="pad" data-jsfiddle="example1">
  56. <h2>Backbone.js</h2>
  57. <p>
  58. <a href="http://backbonejs.org/">Backbone.js</a> is a client-side
  59. MV* framework that can do some pretty smart things
  60. with data going to and coming back from a server, and has a great
  61. event model for keeping multiple views in sync.
  62. </p>
  63. <p>
  64. This little example shows how Backbone Models and Collections can
  65. work with Handsontable. Below, you'll see events firing from
  66. changes in the <code>CarCollection</code> by Handsontable or
  67. otherwise.
  68. </p>
  69. <div id="example1"></div>
  70. <p>
  71. <button name="dump" data-instance="hot" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
  72. Dump data to console
  73. </button>
  74. <button id="add_car">Simulate a new Car</button>
  75. <br>
  76. <select multiple="multiple" id="example1_events" style="width: 100%; height: 100px"></select>
  77. </p>
  78. <p>
  79. <strong>Please note</strong> that Backbone integration is a work in progress since Handsontable 0.8.14.
  80. The code presented here has 2 known issues:
  81. </p>
  82. <ul>
  83. <li>inserting and removing rows or columns triggers errors, both when using <code>alter</code> method and
  84. the context menu
  85. </li>
  86. <li><code>minSpareRows</code> does not have effect directly after row was added from Backbone (as a
  87. workaround, you would need to call <code>loadData</code> instead of <code>render</code>)
  88. </li>
  89. </ul>
  90. <p>
  91. Both issues will be addressed in future versions of HT. Contributions are welcome!
  92. </p>
  93. </div>
  94. </div>
  95. <div class="codeLayout">
  96. <div class="pad">
  97. <div class="jsFiddle">
  98. <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
  99. </div>
  100. <script data-jsfiddle="example1">
  101. var
  102. container = document.getElementById('example1'),
  103. addCar = document.getElementById('add_car'),
  104. eventHolder = document.getElementById('example1_events'),
  105. CarModel = Backbone.Model.extend({}),
  106. CarCollection,
  107. cars,
  108. hot;
  109. CarCollection = Backbone.Collection.extend({
  110. model: CarModel,
  111. // Backbone.Collection doesn't support `splice`, yet! Easy to add.
  112. splice: hackedSplice
  113. });
  114. cars = new CarCollection();
  115. // since we're not using a server... make up some data. This will make
  116. // a couple CarModels from these plain old objects
  117. cars.add([
  118. {make: 'Dodge', model: 'Ram', year: 2012, weight: 6811},
  119. {make: 'Toyota', model: 'Camry', year: 2012, weight: 3190},
  120. {make: 'Smart', model: 'Fortwo', year: 2012, weight: 1808}
  121. ]);
  122. hot = new Handsontable(container, {
  123. data: cars,
  124. dataSchema: makeCar,
  125. contextMenu: true,
  126. columns: [
  127. attr('make'),
  128. attr('model'),
  129. attr('year')
  130. ],
  131. colHeaders: ['Make', 'Model', 'Year']
  132. // minSpareRows: 1 //see notes on the left for `minSpareRows`
  133. });
  134. // this will log all the Backbone events getting fired!
  135. cars.on('all', logEvents)
  136. .on('add', function () {
  137. hot.render();
  138. })
  139. .on('remove', function () {
  140. hot.render();
  141. });
  142. // you'll have to make something like these until there is a better
  143. // way to use the string notation, i.e. "bb:make"!
  144. // normally, you'd get these from the server with .fetch()
  145. function attr(attr) {
  146. // this lets us remember `attr` for when when it is get/set
  147. return {data: function (car, value) {
  148. if (_.isUndefined(value)) {
  149. return car.get(attr);
  150. }
  151. car.set(attr, value);
  152. }};
  153. }
  154. // just setting `dataSchema: CarModel` would be great, but it is non-
  155. // trivial to detect constructors...
  156. function makeCar() {
  157. return new CarModel();
  158. }
  159. // use the "good" Collection methods to emulate Array.splice
  160. function hackedSplice(index, howMany /* model1, ... modelN */) {
  161. var args = _.toArray(arguments).slice(2).concat({at: index}),
  162. removed = this.models.slice(index, index + howMany);
  163. this.remove(removed).add.apply(this, args);
  164. return removed;
  165. }
  166. // show a log of events getting fired
  167. function logEvents(event, model) {
  168. var now = new Date(),
  169. option = document.createElement('OPTION');
  170. option.innerHTML = [':', now.getSeconds(), ':', now.getMilliseconds(), '[' + event + ']',
  171. JSON.stringify(model)].join(' ');
  172. eventHolder.insertBefore(option, eventHolder.firstChild);
  173. }
  174. Handsontable.Dom.addEvent(addCar, 'click', function () {
  175. cars.add({make: "Tesla", model: "S", year: 2012, weight: 4647.3});
  176. });
  177. </script>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="footer-text">
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <div id="outside-links-wrapper"></div>
  188. </body>
  189. </html>