Instanties van objecten in JS gescheiden houden
Ik heb op de volgende manier een class gebouwd:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
function modal_window_handler(id){
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
}
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
}
Plus nog meer, maar hiermee krijg ik de problemen. Het idee is dat deze class bepaalde standaard events van verschillende modal screens kan afhandelen. De save functie wil ik opslaan zodat als er op de save button wordt geklikt die functie kan worden aangeroepen als een callback functie.
Op een pagina script kan het dan als volgt aanroepen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//voor een update scherm
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
Volgens mij maak ik hier twee verschillende instanties aan van de class die ik boven heb gedefinieerd. De twee objecten zouden dus apart de gegevens moeten opslaan en ik zou het dus naast elkaar moeten kunnen gebruiken. Maar dat lijkt niet helemaal te werken. De laatste save functie wordt alleen opgeslagen en in beide objecten aangeroepen. Op de een of andere manier lijken de beide instanties dus naar hetzelfde object te wijzen. In het begin leek het wel goed te werken, maar opeens niet meer.
Iemand enig idee wat ik blijkbaar niet goed doe en hoe ik dit op kan lossen?
Voorbeeldje van hoe je dit kan gebruiken. Volgens mij doet dit wat nodig is.
Code (php)
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
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
<!doctype html>
<html>
<head>
</head>
<body>
<div id="update"></div>
<div id="add_comment"></div>
<div id="message1"></div>
<div id="message2"></div>
<script>
function modal_window_handler(id) {
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
}
//voor een update scherm
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
// de callbacks
function save_comment() {
document.getElementById("message1").innerHTML = 'save_comment uitgevoerd';
}
function update() {
document.getElementById("message2").innerHTML = 'update uitgevoerd';
}
// de twee callbacks testen / laten uitvoeren ...
update_window.saveFunction();
add_comment_window.saveFunction();
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<div id="update"></div>
<div id="add_comment"></div>
<div id="message1"></div>
<div id="message2"></div>
<script>
function modal_window_handler(id) {
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
}
//voor een update scherm
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
// de callbacks
function save_comment() {
document.getElementById("message1").innerHTML = 'save_comment uitgevoerd';
}
function update() {
document.getElementById("message2").innerHTML = 'update uitgevoerd';
}
// de twee callbacks testen / laten uitvoeren ...
update_window.saveFunction();
add_comment_window.saveFunction();
</script>
</body>
</html>
Gewijzigd op 12/07/2012 13:54:31 door Kris Peeters
Ik heb je voorbeeldje dus even aangepast en met gebruik van jquery. Klik op beide buttons en je ziet dat alleen de tweede callback wordt uitgevoerd, ook voor de update callback. Alleen de tweede wordt dus bewaard:
Code (php)
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
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
<!doctype html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="update"><input type='submit' value='save update'></div>
<div id="add_comment"><input type='submit' value='save comment'></div>
<div id="message1"></div>
<div id="message2"></div>
<script>
function modal_window_handler(id) {
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
$('#'+me.id+' input').click(function(){
me.saveFunction();
});
}
//voor een update scherm
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
// de callbacks
function save_comment() {
document.getElementById("message1").innerHTML = 'save_comment uitgevoerd';
}
function update() {
document.getElementById("message2").innerHTML = 'update uitgevoerd';
}
</script>
</body>
</html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="update"><input type='submit' value='save update'></div>
<div id="add_comment"><input type='submit' value='save comment'></div>
<div id="message1"></div>
<div id="message2"></div>
<script>
function modal_window_handler(id) {
//this opslaan in een variabele omdat this conflicten geeft in jqeury event handlers
me = this;
me.id = id;
me.saveFunction = '';
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
}
$('#'+me.id+' input').click(function(){
me.saveFunction();
});
}
//voor een update scherm
update_window = new modal_window_handler('update');
update_window.setSaveFunction(function(){
update();
});
//voor een comment scherm
add_comment_window = new modal_window_handler('add_comment');
add_comment_window.setSaveFunction(function(){
save_comment();
});
// de callbacks
function save_comment() {
document.getElementById("message1").innerHTML = 'save_comment uitgevoerd';
}
function update() {
document.getElementById("message2").innerHTML = 'update uitgevoerd';
}
</script>
</body>
</html>
Gewijzigd op 12/07/2012 14:38:20 door Erwin H
Ik heb even een fiddle aangemaakt met de correcte code, je ziet ook dat ik hier even wat in verbeterd heb (een functie met als enige doel een andere functie aanroepen is natuurlijk overbodig): http://jsfiddle.net/WouterJ/UbmdR/
Misschien ook een idee om die .click te nesten. Zolang die callback niet aan het object wordt gegeven, kan er toch niets worden uitgevoerd...
Code (php)
1
2
3
4
5
6
2
3
4
5
6
me.setSaveFunction = function(f_save){
me.saveFunction = f_save;
$('#' + me.id).click(function(){
me.saveFunction();
});
}
me.saveFunction = f_save;
$('#' + me.id).click(function(){
me.saveFunction();
});
}
@Kris, ik heb hem niet zo genest, maar ik maak nog wel een check op of de functie bestaat. Als er geen callback wordt meegegeven dan heb ik nog wel een default handler die iets uitvoert.