Comment manipulation Etat pour l'interface utilisateur Page unique App Avec Backbone

Question

Ours avec moi comme je viens d'un fond de développement web traditionnel, en utilisant ASP.Net, et même côté serveur MVC. Je cherche à construire une application unique page très interactif à l'aide Backbone.js pour aider à organiser mon code javascript et construire l'interface utilisateur.

J'éprouve des difficultés avec certains concepts, ou des approches pour la construction des composants de mon interface utilisateur, et de décider comment gérer certains aspects. Je vais utiliser cette capture d'écran trop simpliste comme base de mes questions et de discussion.

L'utilisation de Let une application "TO-DO" comme un exemple (bien sûr). L'interface utilisateur est assez simple. Je les ai suivantes « composants » ...

• Une liste de résultats qui montre l'ensemble actuel de dos à qui correspondent aux critères sélectionnés actuellement
• Une liste de mes listes de tâches (personnelles, travail, Blog du projet)
• Une liste de filtres de date d'échéance (aujourd'hui, demain, cette semaine, la semaine prochaine)
• Une liste des tags (Bug, Feature, Idée, suivi)
• Une boîte de recherche

fonctionnalité désirée

• Mise à jour des résultats chaque fois que des critères de recherche des changements (choisir une liste, choisir une donnée en raison, choisissez une ou plusieurs balises, entrez le texte de recherche, etc.)
• L'utilisateur peut modifier, ajouter, et des listes de suppression. (Pas vraiment montré dans cette maquette)
• L'utilisateur peut éditer, ajouter et balises de suppression. (Pas vraiment montré dans cette maquette)
• L'utilisateur peut modifier, ajouter et supprimer des tâches à faire. (Pas vraiment montré dans cette maquette)

Modèles de données

Il existe plusieurs modèles que j'identifiés qui sont « données » liées. Ceux-ci étaient faciles à identifier.

• ToDo (représente une seule tâche à faire)
• ToDoCollection (représente une collection de tâches à faire)
• ToDoList (représente une seule liste de tâches)
• ToDoListCollection (représente une collection de listes de tâches)
• Tag (représente une balise unique)
• TagCollection (représente une collection de tags)

Comment l'état d'interface Store?

C'est là que je ne parviens pas à. Je veux montrer quels éléments dans mes menus (du côté gauche) sont actuellement sélectionnés. Je peux certainement écouter les événements et ajouter une classe « sélectionnée » à des éléments comme ils sont sélectionnés, mais je dois aussi des règles, comme « une seule liste peut être sélectionnée à la fois », mais « un certain nombre de balises » peut être sélectionné à un temps. En outre, parce que le To-Do List menu et le menu balises sont dynamiques, ils sont déjà associés à un modèle de ToDoListCollection et TagCollection déjà. Ils sont rendus selon l'état de ces « modèles de données ».

Alors, comment puis-je gérer la gestion de cet état de l'interface utilisateur pour tous ces différents points de vue à l'aide Backbone? Je vous remercie des idées ou suggestions.

Merci!

Answer 1

J'ai eu exactement la question que vous avez fait, et je vais vous faire savoir le secret. Triche

Qu'est-ce que vous avez ici est deux couches d'application différentes, et une certaine confusion à leur sujet. La première couche est la relation entre les objets à faire dans votre système. Ceux-ci, vous stocker dans un modèle relationnel traditionnel d'objet, et vous créez / récupérer / mise à jour / les supprimer comme tout autre application RESTful.

La deuxième couche est la relation entre l'affichage de ces objets et les objets eux-mêmes. Il y a un état là, vous souhaitez conserver. Voici l'aperçu important. Tant que chaque objet GET, PUT ou PARUTION au système a un identifiant unique, la deuxième couche peut être complètement indépendant du premier

La première couche est une API RESTful à « une tâche à faire gestionnaire. » Le second est quelque chose d'unique à cette présentation. Mettre en relation les données dans la première est ténue. Alors, voici ce que je faisais: je codé que l'état de la couche de présentation dans un objet JSON et écrit à un champ de texte propre 8 bits dans le profil de l'utilisateur. Chaque fois que l'utilisateur change d'état, je le fais.

Lorsque les charges d'applications, il charge la majeure partie des données de l'API REST et les informations de couche de présentation, les rejets des dans la couche de présentation qui n'a pas de sens, puis commence Backbone.History et initialise la présentation. Et le serveur n'a pas besoin de savoir any Détails du tout sur le fonctionnement du client. Tant que le client parle votre RESTful Lingo, il peut sauver « les choses divers soins ce client particulier sur » à ce champ de texte sans affecter vos objets ou de leur relation.