test/backbone_pattern2.html at master · vinothMcc/test · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
       type = "text/javascript"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
     type = "text/javascript"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
       type = "text/javascript"></script>
</head>

<body>
<div id="bindId">

</div>
-------DATA---------
<script id="list-template" type="template">
<ul id="items">
        <% for(i = items.length - 1; i >= 0; i--) { %>
  <li>
                <a href="#" data-id="<%= items[i].id %>"><%= items[i].name %></a></li>
<% } %></ul>
</script>
<script type="text/javascript">
var Model = Backbone.Model.extend({
    defaults: {
        items: [
            {
                "name": "One",
                "id": 1
            },
            {
                "name": "Two",
                "id": 2
            },
            {
                "name": "Three",
                "id": 3
            }
        ]
    }
});

var View = Backbone.View.extend({
    initialize: function(options) {
    	console.log("!!!!!!!!!!!!!!!!!")
        // Re-render when the model changes
        this.render();
        // this.model.on('change:items', this.render, this);
    },
	events: {
        "click #items li a": "setSelectedItem"
    },
    template: _.template($('#list-template').html()),
    el: "#bindId",


    render: function() {
    	console.log(this.$el,'22222222222',this.model.toJSON())
        this.$el.html(this.template(this.model.toJSON()));
    },

    setSelectedItem: function(event) {
    	console.log("Pressed")
    	$('#items li a').addClass('selected');
        var selectedItem = $(event.currentTarget);
        console.log('11111111111111111', selectedItem)
        // Set all of the items to not have the selected class
        $('#items li a').removeClass('selected');
        selectedItem.addClass('selected');
        // Store a reference to what item was selected
        this.selectedItemId = selectedItem.data('id');
        return false;
    }
});
console.log('Started!!!')
var modelObj = new Model();
console.log(modelObj.toJSON());
var viewObj = new View({model : modelObj});
</script>
</body>
</html>