/sites/web/bower_components/localforage-backbone/examples/simple.html

https://bitbucket.org/aswinvk28/smartpan-stock-drupal · HTML · 82 lines · 73 code · 9 blank · 0 comment · 0 complexity · e7c18cd5cbc390e72caf256e72699157 MD5 · raw file 

    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf8" />
    5. 

  5.     <title>Simple Backbone.localForage example</title>
    6. 

  6.     <script src="../bower_components/jquery/dist/jquery.js"></script>
    7. 

  7.     <script src="../bower_components/underscore/underscore.js"></script>
    8. 

  8.     <script src="../bower_components/backbone/backbone.js"></script>
    9. 

  9.     <script src="../bower_components/localforage/dist/localforage.js"></script>
    10. 

  10.     <script src="../dist/localforage.backbone.js"></script> 
    11. 

  11.   </head>
    12. 

  12.   <body>
    13. 

  13.     <script type="template/form" id="formtpl">
    14. 

  14.         <form>
    15. 

  15.             <input type="text" name="content" />
    16. 

  16.             <input type="submit" value="Create" />
    17. 

  17.         </form>
    18. 

  18.     </script>
    19. 

  19.     <script>
    20. 

  20.       (function (Backbone, _) {
    21. 

  21.           'use strict';
    22. 

  22. 

  23.           // Set driver (optional, but we use localforage here so developers
    24. 

  24.           // can more easily inspect it).
    25. 

  25.           localforage.setDriver('localStorageWrapper');
    26. 

  26. 

  27.           // We store offline data inside a collection. This is how we tell
    28. 

  28.           // a model/collection to store data offline with localForage.
    29. 

  29.           var MyCollection = Backbone.Collection.extend({
    30. 

  30.               sync: Backbone.localforage.sync('MyCollection'),
    31. 

  31.               model: Backbone.Model.extend({
    32. 

  32.                   sync: Backbone.localforage.sync('ModelNamespace')
    33. 

  33.               })
    34. 

  34.           });
    35. 

  35. 

  36.           // A view with a form and the collection contents
    37. 

  37.           var MyFormView = Backbone.View.extend({
    38. 

  38.               events: {
    39. 

  39.                   'submit form': 'handleSaveModel'
    40. 

  40.               },
    41. 

  41. 

  42.               initialize: function (options) {
    43. 

  43.                   // For the sake of the example, this is very bad
    44. 

  44.                   // performance-wise :)
    45. 

  45.                   this.listenTo(this.collection, 'add remove change sync', this.render);
    46. 

  46.               },
    47. 

  47. 

  48.               createModel: function (model) {
    49. 

  49.                   return $("<div>", {
    50. 

  50.                       'class': 'saved-data',
    51. 

  51.                       text: model.get('content')
    52. 

  52.                   });
    53. 

  53.               },
    54. 

  54. 

  55.               handleSaveModel: function (event) {
    56. 

  56.                   event.preventDefault();
    57. 

  57.                   // It'll write on the localforage offline store
    58. 

  58.                   this.collection.create({content: this.$('[name="content"]').val()});
    59. 

  59.               },
    60. 

  60. 

  61.               render: function () {
    62. 

  62.                   // Render the form template on this.$el and append the
    63. 

  63.                   // collection content
    64. 

  64.                   this.$el
    65. 

  65.                       .html(_.template($('#formtpl').html()))
    66. 

  66.                       .append(this.collection.map(this.createModel));
    67. 

  67.               }
    68. 

  68.           });
    69. 

  69. 

  70.           // Instancing the collection and the view
    71. 

  71.           var collectionInstance = new MyCollection();
    72. 

  72.           var myFormView = new MyFormView({
    73. 

  73.               el: $('<div>', {'class': 'content'}).appendTo(document.body),
    74. 

  74.               collection: collectionInstance
    75. 

  75.           });
    76. 

  76. 

  77.           myFormView.render();
    78. 

  78.           collectionInstance.fetch();
    79. 

  79.       }(this.Backbone, this._));
    80. 

  80.     </script>
    81. 

  81.   </body>
    82. 

  82. </html>
    83.