/
finished_controller.html
106 lines (83 loc) · 2.75 KB
/
finished_controller.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<script src="../lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function($, exports){
var mod = {};
mod.create = function(includes){
var result = function(){
this.initializer.apply(this, arguments);
this.init.apply(this, arguments);
};
result.fn = result.prototype;
result.fn.init = function(){};
result.proxy = function(func){ return $.proxy(func, this); };
result.fn.proxy = result.proxy;
result.include = function(ob){ $.extend(this.fn, ob); };
result.extend = function(ob){ $.extend(this, ob); };
result.include({
initializer: function(options){
this.options = options;
for (var key in this.options)
this[key] = this.options[key];
if (this.events) this.delegateEvents();
if (this.elements) this.refreshElements();
},
$: function(selector){
return $(selector, this.el);
},
refreshElements: function(){
for (var key in this.elements) {
this[this.elements[key]] = this.$(key);
}
},
eventSplitter: /^(\w+)\s*(.*)$/,
delegateEvents: function(){
for (var key in this.events) {
var methodName = this.events[key];
var method = this.proxy(this[methodName]);
var match = key.match(this.eventSplitter);
var eventName = match[1], selector = match[2];
if (selector === '') {
this.el.bind(eventName, method);
} else {
this.el.delegate(selector, eventName, method);
}
}
}
});
if (includes) result.include(includes);
return result;
};
exports.Controller = mod;
})(jQuery, window);
var exports = this;
jQuery(function($){
exports.SearchView = Controller.create({
elements: {
"input[type=search]": "searchInput",
"form": "searchForm"
},
events: {
"submit form": "search"
},
init: function(){ /* ... */ },
search: function(){
alert("Searching: " + this.searchInput.val());
return false;
},
});
new SearchView({el: $("#users")});
});
</script>
</head>
<body>
<div id="users">
<form>
<input type="search" value="" placeholder="Enter a query">
<button>Search</button>
</form>
</div>
</body>