forked from dragosu/jquery-aciPlugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
super.html
123 lines (93 loc) · 4.78 KB
/
super.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>aciPlugin _super demo - A jQuery plugin boilerplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.aciPlugin.js"></script>
</head>
<body>
<p><b>_super</b> parent call test: each call will write a string down in a DIV then call the parent method.<br />
Calling the 'direct' method will process things without a delay. The 'timed' and 'error' methods both delay execution when calling the parent method with <b>_super</b>.<br />
The delay is done with a setTimeout, the current method will exit before setTimeout calls the anonymous function.<br />
The call to the 'error' method will generate an error in your browser (see the error console).<br />
The way to handle this is with the 'timed' method, where '_super' is saved to a local variable too.
As of v1.3.0 the <b>.proxy</b> method can be used (instead of keeping a local reference to _super etc.)
</p>
<p>Note: see the source code to understand what's going on with the 'superDemo' implementation.</p>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script class="code" type="text/javascript">
aciPluginClass.plugins.superDemo = aciPluginClass.aciPluginUi.extend({
write_A: function(method) {
this._instance.jQuery.append('from A [' + method + ']<br />');
},
direct: function() {
this.write_A('direct');
},
timed: function() {
this.write_A('timed');
},
timedProxy: function() {
this.write_A('timedProxy');
},
error: function() {
this.write_A('error');
}
}, 'private_a');
aciPluginClass.plugins.superDemo = aciPluginClass.plugins.superDemo.extend({
write_B: function(method) {
this._instance.jQuery.append('from B [' + method + ']<br />');
},
// direct call the parent
direct: function() {
this.write_B('direct');
this._super();
},
// the way to go, keep a reference to _this & _super
timed: function() {
this.write_B('timed');
// save into _this to reference from the anonymous function
var _this = this;
// save into _super to reference from the anonymous function
var _super = this._super;
setTimeout(function() {
_super.apply(_this);
}, 500);
},
// as of v1.3.0 we can use the .proxy method
timedProxy: function() {
this.write_B('timedProxy');
setTimeout(this.proxy(function(){
this._super();
}), 500);
},
// this will fail with an error in your browser
error: function() {
this.write_B('error');
// save into _this to reference from the anonymous function
var _this = this;
setTimeout(function() {
// we'll get a error here because we did not keep the reference to _super
_this._super();
}, 500);
}
}, 'private_b');
aciPluginClass.publish('superDemo');
$('#div1').append('direct:<br/>').superDemo('api').direct();
$('#div2').append('timed:<br/>').superDemo('api').timed();
$('#div3').append('timedProxy:<br/>').superDemo('api').timedProxy();
$('#div4').append('error:<br/>').superDemo('api').error();
</script>
<script type="text/javascript">
$(function() {
$('script.code').each(function() {
$(this).before('<div style="clear:both;margin:10px 0 10px 0"><pre style="padding:20px;border:1px dashed #000;background:#f6f6f6;display:inline-block;"></pre></div>');
$(this).prev('div').find('pre').text($(this).html());
});
});
</script>
</body>
</html>