7. Learn backbone.js tutorial from scratch for beginners(Part 10) Model data to underscore.js templ

C:\Users\Administrator\Desktop\gulp\app.js

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
      console.log('Hello, i am here');
    }
  });
  fmodel = new FirstModel();
  fmodel.set({
  	name: "Tuong",
  	author: "Lionel Pham"
  });
  var ModelView = Backbone.View.extend({
  	template: _.template("<%= name %> and Author <%= author %>"),
  	el: '#div1',
  	model: fmodel,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {
  		this.$el.html(this.template(this.model.toJSON()));
  	}
  });
  vmodel = new ModelView();
});

Hoặc

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
      console.log('Hello, i am here');
    }
  });
  fmodel = new FirstModel();
  fmodel.set({
  	name: "Tuong",
  	author: "Lionel Pham"
  });
  var ModelView = Backbone.View.extend({
  	template: _.template("<%= this.model.get('name') %> and Author <%= this.model.get('author') %>"),
  	el: '#div1',
  	model: fmodel,
  	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="app.js"></script>
  <script type="text/template" id="ourTemplate">
    <button id="btnClick">Click Me</button>
  </script>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

Previous6. Learn backbone.js tutorial from scratch for beginners(Part 9) Pass Model data to backbone.js ViewNext8. Learn backbone.js tutorial from scratch for beginners(Part 11) Head back to underscore.js symbol

Last updated

Was this helpful?