jQuery liaison de données avec vue

Question

J'écris une application qui est un «compteur de puissance» de sortes où je montre une liste de «lieux» dans la navigation qui ont une puissance nominale associée à eux, et une jauge qui agrège cette information. Les emplacements peuvent être imbriqués. Cliquer sur un emplacement change l'état de mon application et charge ses emplacements enfants dans la navigation. En cliquant en arrière, l'utilisateur se retrouve dans la liste des emplacements précédents.

sondage Actuellement I pour les nouvelles puissances (se penchera sur une meilleure plus tard solution, mais c'est juste une preuve de concept) alors je régénérer mon point de vue de la navigation à l'aide d'un modèle et quelque chose de similaire à $(nav).html(someHtml)

J'utilise délégation d'événement, je n'ai donc pas besoin de relier les événements sur mes sites en cas de changement d'état. Donc, actuellement, je suis en train d'écraser la vue chaque fois que je reçois un nouvel ensemble de données. Je ne suis pas certain qu'il y ait des conséquences sur le rendement, mais il y a certainement des ramifications fonctionnelles. Par exemple, parfois ma liste d'emplacements dépasse mon espace de navigation, donc je défile (overflow:auto). Lorsque je mets à jour la vue, elle réinitialise le scrollTop de ce div, ce qui le rend inutilisable pour quelqu'un qui fait défiler une longue liste d'emplacements. Donc, je cherche une solution qui me permet de lier réellement mes données JSON aux éléments dom pour chaque emplacement. Puis, quand je sondage, je peux $ .extend mes données existantes et l'ai automatiquement actualiser les valeurs dans ma vue. Est-ce possible? Je viens de trouver le plugin jquery-datalink mais il semble réaliser que juste pour les formulaires, je n'ai pas de formulaires sur cette application.

Je ne l'ai jamais vraiment utilisé la méthode de données de jQuery, je ne sais même pas si c'est ce que je dois, mais au fond, je veux quelque chose comme ceci:

• Lorsqu'un emplacement est cliqué, déclencher un état modifier qui charge les nouvelles données et définit mon URL d'interrogation.
• chargement de données d'abord générera la vue (de nouveaux emplacements)
• charges de données suivantes (par vote) va simplement mettre à jour les éléments dom avec les données appropriées plutôt que de régénérer le code html

Je suis tout oreilles quant à certaines solutions possibles. Pseudo code et preuve de concepts sont les bienvenus car je suis pleinement capable de mettre en œuvre une solution théorique.

modifier points bonus pour son intégration avec une solution de votre choix templating (jQuery.tmpl ou moustache etc ...)

Answer 1

http://documentcloud.github.com/backbone/

Answer 2

Vous pouvez utiliser jQuery pure html templates pour cela.

Answer 3

Il existe maintenant official jquery plugins qui fournissent des liaisons de données et des modèles. Voir ce que John Resig has to say à ce sujet.En outre, il y a d'autres ressources que vous pourriez être intéressé par:

• http://github.com/nje/jquery-datalink
• http://github.com/nje/jquery-datalink/wiki/jquery-data-linking-proposal
• https://github.com/raid-ox/chain.js/wiki/ (celui-ci est vieux, mais peut-être intéressant de regarder le code)

Mon application a les mêmes types d'exigences que la vôtre, donc je suis très désireux de trouver une bonne solution. Je n'ai pas encore essayé de lier les données jquery, mais je prévois de le faire dès que le temps le permettra. Mais je ne suis pas sûr si ce sera assez robuste pour répondre à mes besoins assez complexes.

Ce qui m'intéresse vraiment, c'est de faire la liaison de données de manière événementielle. Fondamentalement, la vue écouterait les événements «changement de modèle» et «collection-changement» et se mettrait à jour en conséquence. Quand un modèle est changé, un événement serait jeté. Un composant de vue voit cet événement et se met à jour automatiquement. Il ya quelques temps, j'ai passé beaucoup de temps à travailler sur un système de liaison de données piloté par les événements comme celui-ci. Je l'ai probablement fait à 75%, mais j'ai ensuite dû revenir à un vrai travail. Il s'est avéré assez complexe car il fallait gérer beaucoup de scénarios. Et je créais essentiellement un système de gestion de données qui enveloppait des objets JSON avec des modèles et des collections. C'était nécessaire pour pouvoir détecter quand les valeurs changeaient et lancer des événements. Par exemple:

• Un élément de données existant unique est mis à jour, afin de mettre à jour partout dans la vue où ce modèle de données a été rendu. Par exemple, l'utilisateur actuellement connecté peut voir son nom à la fois dans le composant "Welcome Tom Smith" en haut de la page, dans une liste des "utilisateurs actuellement connectés" (un élément d'une collection) et dans un " Mon profil ". Si Tom change de nom, le changement devrait apparaître partout.
• Une collection d'éléments a été modifiée, il est donc nécessaire de montrer l'état actuel de la collecte. Il est plus facile de simplement restituer toute la collection dans la vue, mais tout état existant est perdu (comme la position de défilement, les divs cachés/affichés, etc.). Une meilleure solution consiste à ajouter de nouveaux éléments, à supprimer les anciens éléments et à mettre à jour les éléments existants qui ont été modifiés dans la vue sans actualiser la vue entière. Cela devient un cauchemar de la gestion des données, en gardant la trace des modèles sales, des collections sales, et autres.
• Vous devez vous assurer de mettre à jour chaque composant de vue une seule fois lors d'un changement de modèle. Si une collection est sale et qu'un élément de la collection est sale, n'actualisez pas la totalité de la collection, puis actualisez également l'élément qu'elle contient.
• Doit être générique et fonctionner avec n'importe quel type de vue.
• Qu'en est-il de la pagination des données? Si la vue affiche les éléments 1-50 à la page 1 et que 5 éléments sont supprimés du modèle de collecte de données, une requête AJAX doit-elle être envoyée au serveur pour obtenir 5 éléments supplémentaires afin que la vue affiche 50 éléments?

Un jour Je reviendrai sur ce projet, car j'y ai mis beaucoup de temps. Mais d'abord je vais essayer le projet jquery datalinking. Peut-être qu'ils ont déjà résolu tout cela. J'aimerais entendre vos commentaires si vous l'utilisez.

Alors, qu'en est-il des points bonus que vous mentionnez? :)