Javascript et le DataBinding?

Version imprimable

04/03/2009, 19h16
DarkHerumor

Javascript et le DataBinding?
C'est de nouveau moi :mrgreen:

Je vais peut-être demander un truc fou mais soit...
Est-il possible de faire du DataBinding en JavaScript? Pour un peu mieux explicité ce que je veux faire, voici ce que je veux:
Code:

1 2 3 4 5 6 <script type="text/javascript"> var myVar = 'toto'; </script> <input type="text" value="javascript:myVar;" />
Et avec ça, je voudrai que dès que je modifie myVar, mon input prenne la nouvelle valeur (et vice versa si possible).

2 moyens :

- la fonction watch, mais ce n'est pas standard (n'existe que sur Fx)
exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
	o={myVar:'toto'}
	o.watch('myVar',changePropertieValue);
	function changePropertieValue(propertie,oldValue,newValue)
	{
		document.getElementById('aTextField').value=newValue;
	}
</script>
<input id="aTextField" type="text" value="toto" />
<input type="button" value="changer pour 'titi'" onclick="o.myVar='titi';">

- reproduire le fonctionnement de watch
exemple :

Code:

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
 
<script type="text/javascript">
	o={myVar:'toto'}
	function changePropertieValue(propertie,oldValue,newValue)
	{
		document.getElementById('aTextField').value=newValue;
	}
 
	function Watcher(object,propertie,handler)
	{
		this.object=object;
		this.propertie=propertie;
		this.handler=handler;
 
		this.oldValue=object[propertie];
		this.timer=null;
	}
	Watcher.prototype.start=function(){this.timer=setInterval(run(this),1000);}
	Watcher.prototype.stop=function() {clearInterval(this.timer);}
 
	function run(watcher)
	{
		return function()
		{
			if (watcher.object[watcher.propertie]!=watcher.oldValue)
			{
				watcher.handler(watcher.propertie,watcher.oldValue,watcher.object[watcher.propertie]);
				watcher.oldValue=watcher.object[watcher.propertie];
			}
		};
	}
 
	watcher=new Watcher(o,'myVar',changePropertieValue);
	watcher.start();
</script>
<input id="aTextField" type="text" value="toto" />
<input type="button" value="changer pour 'titi'" onclick="o.myVar='titi';">

Le problème c'est de trouver le juste intervalle pour le timer. S'il est trop court les ressources risquent d'être monopolisées, et s'il est trop long la réactivité sera médiocre et les changements rapides et successifs risquent de passer inaperçus.

05/03/2009, 10h01
DarkHerumor

LA première méthode est intéressante je trouve, dommage pour la limitation à Fx...

La seconde est plus embêtante, j'avais pensé à un timer mais je trouve ça un peut violent (pour ce que je veux faire).

Je pense qu'il doit y avoir des solutions annexes en passant par des sortes de Setter et Getter. Je vais essayer de regarder la chose mais je risque de sortir de mon projet et de perdre pas mal de temps pour 2 variables associé à 2 input :aie:
05/03/2009, 10h37
franculo_caoulene

Salut,

Je ne comprends pas bien, c'est peut-être dû à la complexité de ton code, mais pourquoi ne pas simplement exécuter une fonction mettant à jour le champ texte quand myVar est susceptible d'être modifiée?
05/03/2009, 10h48
DarkHerumor

Salut,

Parce que c'est la solution de facilité :aie:

Non en réalité, dans mon présent ça n'a pas un intérêt énorme, mais je suis de nature curieux. Et le DataBinding en js serait à mon avis un atout extra pour réaliser des tout un tas de choses.

Mais au final je pense jouer sur des méthodes de modifications comme tu le proposes, avec un petit gestionnaire d'objets abonnés à la variable.