frontend101/framework/mvc/basic/index.html at master · hkjpotato/frontend101 · 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
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #f5f5f5;
  color: #4d4d4d;
  font-weight: 300;
}
</style>
<body>
<input type="text" />
<input type="button" value="add"></input>
<span id="display"></span>


<script type="text/javascript">
//------------Database-----------------
var Storage = function(data) {
	this.data = data;
}

console.log('hello')
Storage.prototype.fetchData = function(callback) {
	console.log("fetch in the storage");
	callback.call(this, this.data);
}

Storage.prototype.saveData = function(data, callback) {
	console.log("save in the storage");
	this.data.push(data);
	callback.call(this, [this.data]);
}

//------------Model-----------------
var Model = function(storage) {
	this.data = null;
	this.storage = storage;
}
Model.prototype.read = function(callback) {
	console.log("read in the model");
	this.storage.fetchData(callback);
}

Model.prototype.create = function(data, callback) {
	console.log("create in the model");
	this.storage.saveData(data, callback);
}

//------------View-----------------
var View = function() {
	this.display = document.querySelector("#display");
	this.button = document.querySelector("input[type='button']");
	this.input = document.querySelector("input[type='text']");
}

View.prototype.render = function(data) {
	console.log("render in the view");
	this.display.innerHTML = data;
}

View.prototype.bind = function(event, handler) {
	var self = this;
	if (event == "add") {
		self.button.addEventListener("click", function() {
			console.log("click in the view");
			handler(self.input.value);
		});
	} else {
		console.log("this event is not supported!");
	}
}

//------------Model-----------------
var Controller = function(V, M) {
	var self = this;
	self.model = M;
	self.view = V;
	self.view.bind("add", function(data) {
		self.add(data);
	});
}

Controller.prototype.show = function() {
	console.log("show in the controller");
	var self = this;
	self.model.read(function(data) {
		self.view.render(data);
	});
}

Controller.prototype.add = function(data) {
	//handler's logic is here
	console.log("add in the controller");
	var self = this;
	self.model.create(data, function() {
		self.show();
	});
}

//------------Setup-----------------
var view = new View();
var model = new Model(new Storage([]));
var controller = new Controller(view, model);

</script>