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

/marionette-demo.html

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