test/execise.html at master · vinothMcc/test · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!-- Get first name and last name from textbox and show them to table-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
       type = "text/javascript"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
     type = "text/javascript"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
       type = "text/javascript"></script>
</head>
<body>
	<div id="full-name">
		<input type="text" id="first_name" name="">
		<input type="text" id="last_name" name="">
		<input type="button" id="submit" name="">
	</div>
	<div >
		<table id="full-name-list">fsdfjsdfklsdfkj
			<tr id="list-of-names"></tr>
		</table>
	</div>
</body>
<script id="personTemplate" type="text/template">
	<td><%= names %> - <%= last_name %> || </td>

</script>
<script type="text/javascript">
	var app = {}; //name of application
	// template = function(id) {
	// 	console.log(id)
	// 	return _.template( $('#' + id).html() );
	// };
	// Model
	app.appModel = Backbone.Model.extend({
		defaults: {
			first_name: 'Guest User',
			last_name: 'worker'
		}
	});
	app.appCollection = Backbone.Collection.extend({
		model: app.appModel
	})
	// view
	app.appView = Backbone.View.extend({
		// el: '#full-name-list',
		initialize: function (){
			this.setElement($('#list-of-names'))
			this.render();
		},
		events : {

		},
		template: _.template($('#personTemplate').html()),
		render: function () {
			var u = this.$el;
			u.html('');
			var temp = this.template;
			console.log("PRINT : ", this.collection.toJSON())
			this.collection.each(function(names) {
				console.log("&&&&&&&&&",names.get('first_name'), names.first_name)
				console.log("TEMP : ",temp({names: names.first_name}))
				u.append(temp({names: names.get('first_name'), last_name: names.get('last_name')}));
			});


		},

	});
	console.log("---")
	app.personView = Backbone.View.extend({
		el: '#full-name',
		events: {
			'click #submit' : 'addPerson',
			'click #list-of-names' : 'removeName'
		},
		addPerson: function() {
			console.log("Called")
			this.first_name = $("#first_name").val().trim();
            this.last_name = $("#last_name").val().trim();
            this.collection.add({first_name: this.first_name, last_name: this.last_name})
			var appView = new app.appView({collection : this.collection});
			// appView.el;
			// $("#full-name-list").html(appView.el);
		},
		removeName: function () {
			console.log(this.model.remove());
			this.model.remove();
		}

	});

	var collectionObj = new app.appCollection([
		{
			first_name: 'Mohit Jain',
			last_name: '26'
		},
		{
			first_name: 'Taroon Tyagi',
			last_name: '25'
		},
		{
			first_name: 'Rahul Narang',
			last_name: '26'
		}
	]);


	// object creation
	var modelObj = new app.appModel;
	collectionObj.add(modelObj);
	var appview = new app.appView({collection: collectionObj});
	var personview = new app.personView({collection: collectionObj});

</script>
</html>