backbone.js

 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
/* main.js */
var app = app || {};
$(function() {
app.PeopleModel = Backbone.Model.extend({
defaults: {
name: '',
age: '',
sex: 'man'
}
});
app.PeopleView = Backbone.View.extend({
events: {
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
this.render();
},
render: function() {
var template = _.template($("#peopleTemplate").html());
var context = this.model.attributes;
$(".main").html(template(context));
console.log(this.$el.html());
}
});
var peopleModel = new app.PeopleModel({
name: "Rishat",
age: 20
});
var peopleView = new app.PeopleView({
model: peopleModel,
el: $(".main")
});
});
/* template */
<script type="text/template" id="peopleTemplate">
<li>
Name: <%= name %>
Age: <%= age %>
Sex: <%= sex %>
</li>
</script>