PageRenderTime 23ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/backbone-demo.html

https://github.com/dbouwman/js-sanity
HTML | 136 lines | 111 code | 21 blank | 4 comment | 0 complexity | 7f2755321cc08093cf12c490300f78d0 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Created using jsbin.com
  5. Source can be edited via http://jsbin.com/arihiw/2/edit
  6. -->
  7. <head>
  8. <meta name="description" content="Backbone JS Demo" />
  9. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  10. <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  11. <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
  12. <meta charset=utf-8 />
  13. <title>Backbone DEMO</title>
  14. <style id="jsbin-css">
  15. h1 {
  16. font-size:1.5em;
  17. }
  18. #out{margin-top:50px;}
  19. ul{
  20. list-style:none;
  21. -webkit-padding-start: 0px;
  22. }
  23. ul li {
  24. margin:5px;
  25. cursor:pointer;
  26. border:1px solid #CCC;
  27. padding:10px;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <h1>Backbone 101</h1>
  33. <a id="show-drinks" href="#">Show Drinks</a>
  34. <p>Drink Menu</p>
  35. <ul id="menulist"></ul>
  36. <div id="out"><h2>Debug Log:</h2></div>
  37. <script type="text/template" id="menu-item-template">
  38. <%= name %> Price: $<%= price %>
  39. </script>
  40. <script type="text/template" id="comment-item-view-template">
  41. <div class="comment-owner"><span class="icon-user"></span>{{=owner}}</div>
  42. {{ if (type === 'comment' || type === 'annotation') { }}
  43. <div class="comment">{{=comment}} </div>
  44. {{ } else if ( type === 'version') { }}
  45. <div class="comment">{{=type}}: {{=versionTitle}}</div>
  46. {{ } }}
  47. <div class='small-date'>{{=created}} </div>
  48. </script>
  49. <script>
  50. var data = [{
  51. name: 'Margarita',
  52. price: '5.75'
  53. }, {
  54. name: 'Dos XX',
  55. price: '5.00'
  56. }, {
  57. name: 'Corona',
  58. price: '4.50'
  59. }];
  60. $(function(){
  61. //Simple Model
  62. MenuItemModel = Backbone.Model.extend();
  63. //Simple Collection
  64. MenuItemCollection = Backbone.Collection.extend({
  65. model:MenuItemModel
  66. });
  67. MenuView = Backbone.View.extend({
  68. //element to render into (must be in the DOM)
  69. el: "#menulist",
  70. //Rendering logic
  71. render: function(){
  72. var els = [];
  73. //loop over the collection
  74. this.collection.each(function(model){
  75. //Create a new ItemView using the model
  76. var v = new MenuItemView({model:model});
  77. //Push the elements into an array
  78. els.push(v.render().el);
  79. });
  80. //append into the DOM at once
  81. $(this.el).html(els);
  82. }
  83. });
  84. MenuItemView = Backbone.View.extend({
  85. //tag to render into
  86. tagName: 'li',
  87. //model
  88. model: MenuItemModel,
  89. //template function
  90. template: _.template($('#menu-item-template').html()),
  91. //event handling
  92. events: {'click':'itemClick'},
  93. //rendering
  94. render: function(){
  95. this.$el.html(this.template(this.model.toJSON()));
  96. return this;
  97. },
  98. //Event handler
  99. itemClick: function(){
  100. $('#out').append('Thanks for the ' + this.model.get('name') + ' Jack! <br>');
  101. }
  102. });
  103. //initial binding and kickoff
  104. $('#show-drinks').on('click',function(){
  105. //create the collection from data (or collection.fetch())
  106. var dataCollection = new MenuItemCollection(data);
  107. //create the main view
  108. var v = new MenuView({collection: dataCollection});
  109. //and render it
  110. v.render();
  111. });
  112. });
  113. </script>
  114. </body>
  115. </html>