/marionette-demo.html
HTML | 135 lines | 104 code | 27 blank | 4 comment | 0 complexity | 07bee448e3ce709cc2f588cd6255be49 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <!--
- Created using jsbin.com
- Source can be edited via http://jsbin.com/anuyuk/2/edit
- -->
- <head>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.3-bundled/backbone.marionette.min.js"></script>
-
-
- <meta name="description" content="Marionette 101 Example" />
- <meta charset=utf-8 />
- <title>Marionette Example</title>
- <style id="jsbin-css">
- h1 {
- font-size:1.5em;
- }
- #out{margin-top:50px;}
- ul{
- list-style:none;
- -webkit-padding-start: 0px;
- }
- ul li {
- margin:5px;
- cursor:pointer;
- border:1px solid #CCC;
- padding:10px;
- }
- </style>
- </head>
- <body>
-
- <h1>Marionette 101</h1>
- <a id="show-drinks" href="#">Show Drinks</a>
- <p>Drink Menu</p>
- <ul id="menulist"></ul>
-
-
- <div id="out"><h2>Debug Log:</h2></div>
-
- <script type="text/template" id="menu-item-template">
- <%= name %> Price: $<%= price %>
- </script>
-
- <script type="text/template" id="comment-item-view-template">
- <div class="comment-owner"><span class="icon-user"></span>{{=owner}}</div>
- {{ if (type === 'comment' || type === 'annotation') { }}
- <div class="comment">{{=comment}} </div>
- {{ } else if ( type === 'version') { }}
- <div class="comment">{{=type}}: {{=versionTitle}}</div>
- {{ } }}
- <div class='small-date'>{{=created}} </div>
- </script>
-
-
- <script>
- var data = [{
- name: 'Margarita',
- price: '5.75'
- }, {
- name: 'Dos XX',
- price: '5.00'
- }, {
- name: 'Corona',
- price: '4.50'
- }];
- MenuItemModel = Backbone.Model.extend();
- MenuItemCollection = Backbone.Collection.extend({
- model:MenuItemModel
- });
- MenuItemView = Backbone.Marionette.ItemView.extend({
- //model
- model: MenuItemModel,
- //template: _.template($('#menu-item-template').html()),
- //id of the template
- template: '#menu-item-template',
- //tag
- tagName: 'li',
- //event hookup
- events: {'click':'itemClick'},
-
- itemClick: function(){
- $('#out').append('Thanks for the ' + this.model.get('name') + ' Jack! <br>');
- }
- //render: function(){
- // this.$el.html(this.template(this.model.toJSON()));
- // return this;
- //},
- });
- MenuView = Backbone.Marionette.CollectionView.extend({
- //Name of the ItemView to render for each element in the collection
- itemView: MenuItemView,
- //tag to render
- tagName: 'ul'
-
- //el: "#menulist",
-
- //render: function(){
- // var els = [];
- // this.collection.each(function(model){
- // var v = new MenuItemView({model:model});
- // els.push(v.render().el);
- // });
- // $(this.el).html(els);
- //}
- });
- var region = new Marionette.Region({
- el: "#menulist"
- });
- $('#show-drinks').on('click',function(){
- var dataCollection = new MenuItemCollection(data);
- var view = new MenuView({collection: dataCollection});
- region.show(view);
- });
- </script>
- </body>
- </html>