2010-12-14 80 views
1

Le Bon:JavaScript: Algorithme ou méthode pour lier un tableau d'objets à un affichage DOM?

Nous envoyer un tableau JSON d'objets imbriqués en utilisant JQuery et .ajax(). Nous utilisons des modèles JQuery et Microsoft pour rendre le contenu. Il envoie 100 objets en 400 ms. C'est tellement plus rapide que le rendu de notre serveur équivalent de 50 produits en 10 secondes.

Difficulté:

Nous devons lier un tableau d'objets JavaScript aux éléments html DOM qu'il représente, à savoir, les changements à l'entrée html rejaillira à l'objet JavaScript. Notre difficulté est que nos objets sont imbriqués, et ne contiennent que les options choisies:

Product[].Department[].deptid; 
// We only store the departments for which this product participates 

Nous avons essayé de données Microsoft reliant en utilisant JQuery, qui nécessite les deux propriétés de l'objet et les éléments HTML d'exister afin de les lier ensemble. Cela ne va pas bien pour la situation ci-dessus. Nous pourrions faire ceci:

Product[].Department[].Dept.id; 
Product[].Department[].Dept.name; 
Product[].Department[].Dept.selected; // true if selected, false if not 
// This requires all possible options in all needed products. Yuck 

Y a-t-il des exemples là sur la meilleure façon de gérer la liaison d'un tableau d'objets JavaScript imbriqué aux éléments HTML qu'ils représentent?

Nous ne soumettons pas d'éléments de formulaire au serveur. Au lieu de cela, nous les collectons dans un tableau JSON et renvoyons cela au serveur. Cela fonctionne extrêmement vite, mais l'assemblage est fastidieux.

Répondre

3

Il est difficile de savoir exactement ce que vous avez des problèmes avec de votre description, mais il semble que il y a deux choses qui pourraient aider:

1) Vous pouvez stocker des données sur un élément DOM à l'aide des données de jQuery (méthode http://api.jquery.com/data/

2) Vous pouvez obtenir la valeur d'un élément de formulaire en utilisant l'événement change() et la méthode val(). (Vous pouvez également les trouver dans les docs API.)

Mais il semble que vous pourriez avoir quelque chose de plus basique, comme la question de savoir quel objet Javascript va avec l'élément de formulaire. Est-ce le cas?

+0

Oui. J'ai besoin de savoir ce qui a été modifié, ce qui a été supprimé, et ce qui est nouveau pour envoyer des drapeaux de CRUD (CUD) avec chaque objet au serveur. –

+0

Je ne connais pas de bibliothèque générale pour cela, surtout compte tenu de la structure spécifique que vous devez stocker. Cependant, il ne devrait pas être trop complexe de mettre à jour votre modèle (les objets Javascript) lorsque les éléments de formulaire sont modifiés par l'utilisateur - tant que vous pouvez déterminer quels éléments devraient affecter quelles données. –

+1

Ce framework de Jamie Thomas est plutôt sympa: https://github.com/jamiemthomas/jquery-datalink. –