Discussion :

[DarkHerumor]

C'est de nouveau moi

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

[marts]

2 moyens :

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[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?

[DarkHerumor]

Salut,

Parce que c'est la solution de facilité

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.