Backbone :)

https://www.tutorialspoint.com/backbonejs/router_extend.htm

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>
 
</head>
<body>
  <div id="div1"></div>
  <a href="/#view1">View 1</a>
  <a href="/#view2">View 2</a>
  <a href="/#view3">View 3</a>
</body>
</html>

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

jQuery(document).ready(function($) {
  var View1 = Backbone.View.extend({
  	el: '#div1',
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.$el.html('This is view 1 ...');
  	}
  });
  var View2 = Backbone.View.extend({
  	el: '#div1',
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.$el.html('This is view 2 ...');
  	}
  });
  var View3 = Backbone.View.extend({
  	el: '#div1',
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.$el.html('This is view 3 ...');
  	}
  });
  var ProjectRoute = Backbone.Router.extend({
  	routes: {
  		"view1": "ShowView1",
  		"view2": "ShowView2",
  		"view3": "ShowView3"
  	},
  	ShowView1: function() {
  		var view1 = new View1();
  	},
  	ShowView2: function() {
  		var view2 = new View2();
  	},
  	ShowView3: function() {
  		var view3 = new View3();
  	}
  });
  ProjectRouteObj = new ProjectRoute();
  Backbone.history.start();
});

Previous====== Start Learn backbone.js tutorial from scratch for beginners =====Next1. Learn backbone.js tutorial from scratch(Part 2) Features and Working Principle of backbone.js

Last updated 3 years ago