js-sanity /backbone-demo.html

Language HTML Lines 136
MD5 Hash 7f2755321cc08093cf12c490300f78d0
Repository https://github.com/dbouwman/js-sanity.git View Raw File
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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>
Back to Top