/backbone-demo.html
HTML | 136 lines | 111 code | 21 blank | 4 comment | 0 complexity | 7f2755321cc08093cf12c490300f78d0 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <!--
- Created using jsbin.com
- Source can be edited via http://jsbin.com/arihiw/2/edit
- -->
- <head>
- <meta name="description" content="Backbone JS Demo" />
- <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>
-
- <meta charset=utf-8 />
- <title>Backbone DEMO</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>Backbone 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'
- }];
- $(function(){
- //Simple Model
- MenuItemModel = Backbone.Model.extend();
-
- //Simple Collection
- MenuItemCollection = Backbone.Collection.extend({
- model:MenuItemModel
- });
- MenuView = Backbone.View.extend({
- //element to render into (must be in the DOM)
- el: "#menulist",
- //Rendering logic
- render: function(){
- var els = [];
- //loop over the collection
- this.collection.each(function(model){
- //Create a new ItemView using the model
- var v = new MenuItemView({model:model});
- //Push the elements into an array
- els.push(v.render().el);
- });
- //append into the DOM at once
- $(this.el).html(els);
- }
- });
- MenuItemView = Backbone.View.extend({
- //tag to render into
- tagName: 'li',
- //model
- model: MenuItemModel,
- //template function
- template: _.template($('#menu-item-template').html()),
- //event handling
- events: {'click':'itemClick'},
- //rendering
- render: function(){
- this.$el.html(this.template(this.model.toJSON()));
- return this;
- },
- //Event handler
- itemClick: function(){
- $('#out').append('Thanks for the ' + this.model.get('name') + ' Jack! <br>');
- }
- });
-
- //initial binding and kickoff
- $('#show-drinks').on('click',function(){
- //create the collection from data (or collection.fetch())
- var dataCollection = new MenuItemCollection(data);
- //create the main view
- var v = new MenuView({collection: dataCollection});
- //and render it
- v.render();
- });
- });
- </script>
- </body>
- </html>