Eventhandler koppelen aan het veranderen van een object-property.

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Goedemiddag dames en heren!

Even een vraagje waarvan ik denk dat het niet mogelijk is, maar wellicht hebben jullie hier nog verhelderende ideeën over... :)

Ik ben een webapplicatie aan het ontwikkelen, waarbij veel data in JS-variabelen wordt bijgehouden. Als voorbeeld een klein object waarin een datum wordt bijgehouden:

[JS]
var oSelectedDate = {
day: 9,
month: 4,
year: 2012
}
[/JS]

Nu kunnen er op verschillende plekken in de applicatie wijzigingen aan dit object plaatsvinden. Als gevolg daarvan moeten er op een andere plek op de pagina ook weer gegevens worden geüpdatet, nu kan ik bij iedere wijziging van het object de gevolg-code invoken, maar dat lijkt me een "lelijke" manier van programmeren.

Is het mogelijk om hier een soort EventHandler aan te koppelen, die automatisch aangeroepen wordt als ergens in de code een waarde in het object gewijzigd wordt? En dan doel ik niet op een interval, waarbij iedere seconde gecontroleerd wordt of het object veranderd is...

Bedankt alvast!
 
Doe alle veranderingen op dat soort data-objecten dmv een custom functie, zetVariabele (zonDataObject.eenSubObject, key, value) als je eigenlijk zonDataObject.eenSubObject.key=value had willen doen..

Als je dan een andere functie maakt, registerEventHandler (zonDataObject.eenSubObject, key, eventName, eventHandler); waarbij eventName een string is, je hebt er nu maar 1 nodig en dat is "change" of "onchange", en waarbij eventHandler een function (zonDataObject.eenSubObject, key, eventName) wordt.

Dan moet je die registerEventHandler een flat array laten bijhouden waarin ieder item een object is; {data: zonDataObject.eenSubObject, key:key, eventName:"change", eventHandler:jeCallbackFunction}

Als je zetVariabele() wordt aangeroepen, dan loopt die over de flat array van registerEventHandler() en checked if (zonDataObject.eenSubObject===flat_array.data && key=flat_array.key), als dat true is dan weet je dat je een eventhandler hebt voor zonDataObject.eenSubObject[key] die moet worden aangeroepen nadat (of voordat) zetVariabele() de waarde gewijzigd heeft voor je.
 
Laatst bewerkt:
Mischien is mijn laatste bericht in deze draad wat cryptisch voor beginners, dus bij deze volledige demo van m'n oplossing;

Deze code is nog niet perfect voor als je meerdere handlers per key wilt bijhouden, maar dit opzetje kunnen jullie denk ik wel wat mee..

Code: 
<html>
	<head>
		<title>dataStore javascript example</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript">
		var ds = dataStore = {
			data : {
				eersteSetjeVariabelen : {
					varA : 'a',
					varB : 'b'
				},
				tweedeSetjeVariabelen : {
					varC : 'c',
					varD : 'd'
				}
			},
			handlers : [],
			
			setVar : function (dataObject, key, value) {
				var idx = ds.findEventHandler (dataObject, key, 'beforeChange');
				if (idx!==false) {
					var it = ds.handlers[idx];
					if (typeof it.eventHandler=='function') it.eventHandler (it, value);
				};
				
				dataObject[key]=value;
				
				var idx = ds.findEventHandler (dataObject, key, 'afterChange');
				if (idx!==false) {
					var it = ds.handlers[idx];
					if (typeof it.eventHandler=='function') it.eventHandler (it, value);
				}
			},
			
			registerEventHandler : function (dataObject, key, eventName, eventHandler) {
				var newIdx = ds.handlers.length;
				ds.handlers[newIdx] = {
					dataObject : dataObject,
					key : key,
					eventName : eventName,
					eventHandler : eventHandler
				}
			},
			
			deleteEventHandler : function (dataObject, key, eventName, eventHandler) {
				var idx = ds.findEventHandler (dataObject, key, eventName);
				if (idx!==false) ds.handlers.splice (idx, 1);
			},
			
			findEventHandler : function (dataObject, key, eventName) {
				for (var i=0; i<ds.handlers.length; i++) {
					var it = ds.handlers[i];
					if (
						it.dataObject === dataObject
						&& it.key === key
						&& it.eventName === eventName
					) return i;
				}
				return false;
			},
			
			defaultHandlers : {
				beforeChange : function (it, value) {
					$('#dataStoreSelftest').append ('Voor veranderen van key='+it.key+' naar '+value+'<br/>')
				},
				afterChange : function (it, value) {
					$('#dataStoreSelftest').append ('Na veranderen van key='+it.key+' naar '+value+'<br/>')
				}
			},
			
			selftest : function () {
				ds.registerEventHandler (ds.data.eersteSetjeVariabelen, 'varA', 'beforeChange', ds.defaultHandlers.beforeChange);
				ds.registerEventHandler (ds.data.eersteSetjeVariabelen, 'varA', 'afterChange', ds.defaultHandlers.afterChange);
				ds.setVar (ds.data.eersteSetjeVariabelen, 'varA', 'abcdefg');
			}
		}
		</script>
	</head>
	<body onload="dataStore.selftest();">
		<div id="dataStoreSelftest"></div>
	</body>
</html>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan