C:\Users\Administrator\Desktop\gulp\index.html
<!DOCTYPE html>
<html>
<head>
<title>Backbone Example</title>
<link rel="stylesheet" href="lib\css\todos.css" />
<script src="lib/js/jquery-1.9.1.js"></script>
<script src="lib/js/underscore.js"></script>
<script src="lib/js/backbone.js"></script>
<script src="lib/js/handlebars.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
C:\Users\Administrator\Desktop\gulp\app.js
jQuery(document).ready(function($) {
var FirstModel = Backbone.Model.extend({
defaults: {
name: 'Lionel',
team: "Viet Nam",
no: 10
}
});
var model1 = new FirstModel({
team: "VietNam",
no: 16
});
var ModelView = Backbone.View.extend({
el: "#div1",
model: model1,
template: Handlebars.compile("{{name}} and {{team}}"),
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
}
});
vmodel = new ModelView();
});
Hoặc một cách viết dùng script
C:\Users\Administrator\Desktop\gulp\app.js
jQuery(document).ready(function($) {
var FirstModel = Backbone.Model.extend({
defaults: {
name: 'Lionel',
team: "Viet Nam",
no: 10
}
});
var model1 = new FirstModel({
team: "VietNam",
no: 16
});
var ModelView = Backbone.View.extend({
el: "#div1",
model: model1,
template: Handlebars.compile($("#tm-handlebars").html()),
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
}
});
vmodel = new ModelView();
});
C:\Users\Administrator\Desktop\gulp\index.html
<!DOCTYPE html>
<html>
<head>
<title>Backbone Example</title>
<link rel="stylesheet" href="lib\css\todos.css" />
<script src="lib/js/jquery-1.9.1.js"></script>
<script src="lib/js/underscore.js"></script>
<script src="lib/js/backbone.js"></script>
<script src="lib/js/handlebars.js"></script>
<script src="app.js"></script>
<script type="text/x-handlebars-template" id="tm-handlebars">
{{name}} and {{team}}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
C:\Users\Administrator\Desktop\gulp\index.html
<!DOCTYPE html>
<html>
<head>
<title>Backbone Example</title>
<link rel="stylesheet" href="lib\css\todos.css" />
<script src="lib/js/jquery-1.9.1.js"></script>
<script src="lib/js/underscore.js"></script>
<script src="lib/js/backbone.js"></script>
<script src="lib/js/handlebars.js"></script>
<script src="app.js"></script>
<script type="text/x-handlebars-template" id="tm-handlebars">
{{#each data}}
<p>{{this.name}} and {{this.team}}</p>
{{/each}}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
C:\Users\Administrator\Desktop\gulp\app.js
jQuery(document).ready(function($) {
var FirstModel = Backbone.Model.extend({
defaults: {
name: 'Lionel',
team: "Viet Nam",
no: 10
}
});
var model1 = new FirstModel({
name: 'Lionel 1',
team: "VietNam",
no: 16
});
var model2 = new FirstModel({
name: 'Lionel 2',
team: "Haiku",
no: 1
});
var modelCollection = Backbone.Collection.extend({
model: FirstModel
});
var modelCollectionObj = new modelCollection([model1, model2]);
var ModelView = Backbone.View.extend({
el: "#div1",
collection: modelCollectionObj,
template: Handlebars.compile($("#tm-handlebars").html()),
initialize: function() {
this.render();
},
render: function() {
this.$el.html(this.template({
data: modelCollectionObj.toJSON()
}));
}
});
vmodel = new ModelView();
});
