-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
119 lines (99 loc) · 3.82 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Our Amazing Saturday App</title>
</head>
<body>
<div id="main">
</div>
<p id="fruit">I like strawberries</p>
<script id="mr-template" type="x-handlebars-template">
<h1>
Bladdy-blah
</h1>
</script>
<script id="ms-template" type="x-handlebars-template">
<h1>Hello my name is {{name}}</h1>
</script>
<script id="book-template" type="x-handlebars-template">
<h1>{{title}}</h1>
<h3>{{author}}</h3>
<p>{{synopsis}}</p>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
var MainView = Backbone.View.extend({
el : $('#fruit'), // select a pre-existing element on the page
//id: 'fruit', // create a new element by either tagname or class or id
//tagName: 'p', // create a new element
events: {
'click' : "alarm", // in jQuery $('#fruit').click(function() { alert(); });
'mouseover h1' : "hoverCraft" // in jQuery $('#fruit, h1').mouseover(function(){});
},
initialize: function() {
var src = $('#mr-template').html();
var template = Handlebars.compile(src);
this.$el.append(template());
var src2 = $('#ms-template').html();
this.template = Handlebars.compile(src2);
//this.$el.append(template2({name: "Bubba"}));
//this.$el.append("stuff!");
//this.$el.append(); // the $ gives us the cached jQuery element (i.e. the element that exists already)
},
alarm : function() {
alert("time to ride your bike!!");
},
hoverCraft: function() {
console.log("please turn red!");
this.$el.children().css("color", "red");
},
render: function(name) {
this.$el.append(this.template({name: name})); // this appends a name on the fly
}
});
var main = new MainView();
var BookView = Backbone.View.extend({
events: {
"click" : "bookNameAlert"
},
// Passing in book => this allows for line 71
initialize: function(book) {
var src = $("#book-template").html();
var template = Handlebars.compile(src);
this.template = template;
this.model = book; // sets the book to the views model
this.listenTo(this.model, "change", this.render); //if we change one of the attributes of the model, it will re-render the template with the new information
},
render: function() {
var book_item = this.$el.html(this.template(this.model.attributes)); //we pass through the "book" and its attributes (these attributes are being printed in the "book-template")
$("body").html(book_item); // setting the html of the body to the book
},
bookNameAlert: function(){
alert(this.model.get("title"));
}
});
var Book = Backbone.Model.extend({
defaults: {
title: "The Sorcerer's Stone",
author: "JKR",
synopsis: "Really good book about magic stones!"
}
});
var book = new Book(); // creating a new instance of a book
var bookView = new BookView(book); // creating new instance of a book view AND passing in the book object we just created. Notice in the initialize function we are passing through the book
bookView.render(); // this renders the book that has already been set to the bookView's model in the initialized function and referred to as this.model in the render function
var Books = Backbone.Collection.extend({
model: Book,
initialize: function(){
this.on("add", this.update); // adding event listener on the books collection that gets called when you "add" to this collection
},
update: function(){
alert("I am a collection and now have " + this.length); // this defines the update function that gets applied to the collection in the initialize
}
})
</script>
</body>
</html>