20. Learn backbone.js tutorial from scratch for beginners(Part 23) Handlebars templates in backb

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();
});

Previous19. Learn backbone.js tutorial from scratch for beginners(Part 22) Parameterized Routing in backbone Next====== End Learn backbone.js tutorial from scratch for beginners =====

Last updated 4 years ago