3. Learn backbone.js tutorial from scratch for beginners(Part 5) Underscore Templates in Backbone.js

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">
    <h1>Hello 1</h1>
    <h2>Hello 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adip</p>
  </script>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

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

jQuery(document).ready(function($) {
  var theView = Backbone.View.extend({
    el: "#div1",
    template: _.template($("#ourTemplate").html()),
    initialize: function() {
      this.render();
    },
    render: function() {
      this.$el.html(this.template());
      return this;
    }
  });
  var page = new theView();
});

Hoặc viết theo một cách logic hơn

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

jQuery(document).ready(function($) {
  var theView = Backbone.View.extend({
    el: "#div1",
    template: $("#ourTemplate").html(),
    initialize: function() {
      this.render();
    },
    render: function() {
    	var template = _.template(this.template);
      this.$el.html(template);
      return this;
    }
  });
  var page = new theView();
});

Previous2. Learn backbone.js tutorial from scratch for beginners(Part 4) About el and $el in Backbone.js Next4. Learn backbone.js tutorial from scratch for beginners (Part 7) Delegate Events in backbone.js

Last updated 3 years ago