View est ce qui est présenté aux utilisateurs et comment les utilisateurs interagissent avec l`application. La vue est faite avec HTML, CSS, JavaScript et souvent des modèles. Cette partie de votre application chrome a accès au DOM. les modèles de conception sont souvent incorporés dans des frameworks populaires. Par exemple, le modèle de conception MVC (Model-View-Controller) est un modèle omniprésent. En JavaScript, il est difficile de découpler le Framework du modèle de conception. Souvent, un cadre particulier viendra avec sa propre interprétation de ce modèle de conception. Les cadres viennent avec des opinions et chacun vous oblige à penser d`une certaine manière. Le constructeur utilise l`inversion de contrôle et injecte des modules de cette façon. Ce modèle vous permet d`injecter n`importe quel composant qui répond au contrat de haut niveau. Considérez-le comme une façon agréable d`abstraire le code des détails d`implémentation. Ce modèle vous permet d`écrire du code propre en JavaScript simple. Mon objectif pour cet article est de montrer comment appliquer le modèle Model-View-Controller lors du développement d`un composant JavaScript simple.

Le composant est le contrôle ListBox (« Select » balise HTML) avec une liste modifiable d`éléments: l`utilisateur doit être en mesure de sélectionner et de supprimer des éléments et d`ajouter de nouveaux éléments dans la liste. Cette fonction obtient la valeur des éléments Country et Region fournis par le modèle de vue CustomerEditViewModel.cs, appelle la fonction AddRegions pour ajouter les valeurs appropriées à l`élément Region et réinitialise la valeur de l`élément Region. Pour le reste de la réponse permet de considérer le modèle AppUser ci-dessous comme un exemple. Maintenant que vous avez une compréhension de base de pourquoi vous devez utiliser un modèle de conception JavaScript, et ce que l`architecture MVC est tout au sujet, maintenant vous pouvez commencer à construire l`application. Voici un aperçu rapide de la façon dont ce tutoriel fonctionnera. Premièrement, je vais vous présenter le code. Ceci vous donnera l`occasion d`examiner et de marcher à travers elle. Deuxièmement, je vais entrer dans les détails au sujet de quelques-uns des concepts de base que les bases de code ci-dessous utilise, et essayer de jeter un peu de lumière sur les éventuelles zones brumeux ou gris qui pourraient venir à travers comme déroutant. En conclusion, je vais vous montrer quelques captures d`écran de la composante finale. Pour tirer le meilleur parti de ce tutoriel, je vous suggère de passer par cette quelques fois jusqu`à ce que vous vous sentez à l`aise de créer cette application sur votre propre. Ce didacticiel suppose une expérience HTML et JavaScript antérieure.

Si vous êtes nouveau à JavaScript, je vous recommande de prendre un coup d`oeil à http://www.w3schools.com/Js/. Vous pouvez également trouver le projet sur GitHub à https://github.com/joshcrawmer4/Javascript-MVC-App. Allez-y et commencez! Si l`erreur «ReferenceError: Model n`est pas définie» est déclenchée, vous pouvez essayer d`utiliser la méthode suivante: ce que nous faisons dans l`exemple ci-dessus consiste à configurer les écouteurs dans la mise à jour et à détruire les événements à l`aide de Render () et Remove (). Lorsqu`une entrée de photo est mise à jour, nous rerestituons la vue pour refléter les modifications apportées aux métadonnées.