backbone/create-view.html at master · netsider/backbone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div id="user-card"></div>
  <script src="jquery-1.11.2.js"></script>
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script>
	var User = Backbone.Model.extend({}); // Create model
	var user = new User({ // instantiate model
		username: 'Russ',
		displayName: 'netside',
		bio: 'some text'
	});
	var UserView = Backbone.View.extend({ //Create view
		el: '#user-card',
		initialize: function() {
			console.log('Init Function Called');
			this.render();
		},
		render: function() {
			console.log('Render Function Called');
			var $card = $('<h1>' + this.model.get('username')> + '</h1>');
			var $bio = $('<p>' + this.model.get('bio') + '</p>').appendTo($card);
			var $name = $('<h1>' + this.model.get('displayName') + '</h1>'); //.appendTo($card)
			this.$el.html($name); // It doesn't like $card, using $name instead
			//console.log(this.model.get('bio'));
			//console.log(this.model.get('username'));
			//console.log(this.model.get('displayName'));
			return this;
			}
	});
	var userView = new UserView({ // instantiate view
			model: user
	});
	console.log(userView.el); // Displays entire view
	userView.$el.show();
  </script>
  </body>
</html>