[Powered by Google Translate] [Séminaire] [Frameworks JavaScript: pourquoi et comment?] [Kevin Schmid] [Université de Harvard] [C'est CS50.] [CS50.TV] 

Salut tout le monde. Bienvenue au séminaire des cadres du JavaScript. Mon nom est Kevin, et aujourd'hui, je vais parler de frameworks JavaScript, et l'objectif de ce séminaire est de ne pas vous rendre à, disons, maîtriser un cadre particulier en soi mais pour vous donner une introduction générale à un couple de cadres et montrer pourquoi nous ne voudrait jamais utiliser un cadre. 

Avant de le faire, je vais vous donner un peu de fond en JavaScript, et puis nous allons prendre à partir de là. Nous allons commencer par mettre en œuvre une liste de choses à faire. Voici notre liste de tâches pour aujourd'hui. C'est un peu drôle. Nous devons mettre en œuvre une liste de choses à faire en JavaScript. C'est ce que ça va ressembler, donc c'est notre premier but. Nous n'allons pas utiliser un cadre pour le faire. Nous allons code JavaScript et obtenir la liste des choses à faire au travail. Ensuite, nous allons améliorer la conception sans l'aide d'un cadre. Nous allons discuter de diverses choses que nous pouvons faire avec juste JavaScript seul pour rendre notre to-do list un peu plus bien conçu. Ensuite, nous allons jeter un peu jQuery, et puis nous allons regarder la même liste de choses à faire, juste mis en œuvre dans différents cadres, et nous discuterons  les avantages et les inconvénients long du chemin. 

Commençons mise en œuvre de cette liste de choses à faire. Disons que nous sommes donné cette HTML. Je vais en faire un peu plus petit. Comme vous pouvez le voir, j'ai une petite tête qui dit Todo et une petite boîte où je peux entrer dans une description d'un todo puis un nouveau bouton d'article, nous allons donc essayer d'entrer dans une nouvelle todo à cette liste. Donner un séminaire de cadres JavaScript, et je suis à frapper nouvel élément. Je reçois cette alerte JavaScript qui dit appliquer moi. Nous avons à mettre en œuvre. Voyons maintenant le code pour ce faire, à la fois le HTML et le JavaScript. Voici notre HTML. Comme vous pouvez le voir ici, voici notre petite tête de Todos. C'était cette chose gras en haut, et puis nous avons la zone de saisie avec l'espace réservé, et puis il ya un certain attribut de ce bouton qui appelle cette fonction addTodo. Quelqu'un veut-il deviner ce que le clic est signifiant? [Étudiant de réponse inaudible] Bon, le clic sur un peu comme un événement, comme un clic de souris est juste un événement, et ce que nous faisons est Nous attachons le cas de clic sur ce bouton pour exécuter cette fonction. AddTodo est ce gestionnaire d'événements pour cliquant sur ce bouton. 

Comme vous pouvez le voir, lorsque je clique sur le bouton Nouvel élément l'événement de clic sur obtient mis le feu, et cette fonction est appelée. Regardons fonction. Comme vous pouvez le voir, voici mon code JavaScript jusqu'à présent. Ce que j'ai en tête est une structure de données globale pour ma to-do list. Il ressemble à un tableau. C'est juste un tableau vide. Et puis j'ai la fonction addTodo que nous avons vu plus tôt, et la seule ligne de code, il ya cette alerte. Il avertit en œuvre moi, et puis j'ai 2 tâches à accomplir. Je dois ajouter la todo pour que la structure globale des données, et puis je veux faire ressortir la liste des choses à faire. Rien d'extraordinaire pour l'instant, mais JavaScript vous pouvez ne pas être familiers avec, donc je vais y aller doucement et de revoir les fondements de JavaScript dans ce sens. 

Donnons-ce un coup de feu. Disons que l'utilisateur saisit quelque chose dans cette case. J'ai juste tapé quelque chose ici, texte. Comment puis-je trier d'accès que le texte via JavaScript? Rappelez-vous que JavaScript, une de ses caractéristiques fondamentales est qu'il nous donne cet accès programmatique au DOM. Il nous permet d'accéder aux éléments et leurs propriétés de ce HTML réelle. La façon dont nous le faisons avec Bare Bones JavaScript c'est que nous pouvons réellement utiliser une fonction en JavaScript appelé getElementByID. Je veux stocker le texte qui est là tapé dans une variable, donc je vais dire une nouvelle variable appelée new_todo, et je vais prendre cet élément. Il s'agit d'une fonction. GetElementByID. Et maintenant, je me fais un élément par ID, donc j'ai besoin de l'identification de la zone de texte, alors je lui ai donné le new_todo_description d'identité. Voilà comment je vais me faire un élément. C'est mon argument à cette fonction, pour spécifier les ID à obtenir. Et donc c'est un élément HTML, et il a des propriétés. Vous avez vu ces derniers. Ils sont les attributs. L'attribut de l'élément de texte qui stocke l'entrée de l'utilisateur est appelé valeur. J'ai gardé la valeur de cette zone de texte maintenant dans cette variable appelée new_todo. Maintenant, j'ai un accès par programme à cette variable, ce qui est plutôt cool parce que maintenant ce que je peux faire, c'est que je peux ajouter à ma liste à faire. 

La façon dont nous le ferions en JavaScript, et ne vous inquiétez pas si vous n'êtes pas familier avec cela, mais juste en passant par il est todos.push parce que c'est le nom de ma structure globale des données ici, et je vais pousser new_todo. C'est super parce que maintenant je l'ai ajouté à ma JavaScript représentation de cette liste à faire. Mais maintenant, comment puis-je le récupérer pour le HTML? Je dois trouver un moyen de trier de le repousser. En d'autres termes, j'ai en quelque sorte dois dessiner ça. Ce que nous allons faire, c'est que nous allons tirer la liste de choses à faire. J'ai besoin de mettre à jour d'autres HTML sur cette page, et comme vous pouvez le voir, j'ai laissé ce petit récipient ici, ce diviseur de la page dont l'ID est todos, et je vais mettre la liste de choses à faire là-bas. D'abord, je vais l'effacer parce que, par exemple, il y avait une vieille liste à faire là-bas. Je reçois cet élément par ID à nouveau, et je accéder au HTML interne de cet élément, et je vais tirer cela au clair. Si nous avons quitté ce code tel quel, nous verrions un rien vide là-bas, et maintenant je veux commencer à rendre ma nouvelle liste de choses à faire. Je suis fondamentalement va anéantir ma to-do list. 

Maintenant l'intérieur HTML interne de cette todos div est tout à fait clair, et maintenant j'ai besoin pour commencer à ajouter ma liste. La première chose que je tiens à rajouter est la balise de liste non ordonnée, qui désigne essentiellement que c'est le début d'une liste non ordonnée. Maintenant, pour chaque élément dans mon tableau de todos je veux imprimer à l'intérieur de ce HTML. Je tiens à ajouter sur le fond de cette liste. Tout comme en C, je peux utiliser une boucle, et je vais commencer au début de ma liste à l'élément 0, et je vais y aller tout le chemin à la longueur de la liste. Nous pouvons réellement obtenir la longueur d'un tableau en JavaScript en utilisant la propriété de longueur. Fondamentalement, je vais faire quelque chose de très similaire à l'intérieur de ici pour imprimer l'élément. Je peux à nouveau accéder à la div todos, la propriété HTML interne de cela, et je vais ajouter à ce nouvel élément de liste, et que ça va être entouré par cette balise li, et je vais enchaîner avec l'opérateur +, et c'est le ième élément de mon tableau todos, et puis je vais fermer cette balise. Maintenant, pour chaque élément, nous allons ajouter une nouvelle entrée dans la liste. Et puis tout ce que nous devons vraiment faire est de fermer cette balise. J'ai juste besoin de fermer cette non-ordonnées tag de liste. 

Avez-vous une idée de comment ça fonctionne? Cela ouvre la liste entière. Cela ajoute des éléments individuels de la liste todos à la liste, et puis qui ferme la liste entière, et c'est ma fonction addTodo. Je commence en fait en obtenant le todo de la zone de texte. J'ajoute que pour le tableau todos, puis je re-rendre la liste des choses à faire. Maintenant, je peux ajouter des articles à ma liste. C'est assez excitant car en quelques lignes de code nous avons essentiellement fait une liste de choses à faire là où nous pouvons ajouter des éléments. Grand. C'est en quelque sorte d'une introduction de base à JavaScript. Ne vous inquiétez pas trop sur la syntaxe pour l'instant, mais pensez à ce point de vue conceptuel. Nous avons eu quelques HTML. Nous avons eu une zone de texte sur la page que, fondamentalement, permet aux utilisateurs de saisir un objet à faire à ajouter. Et puis nous avons utilisé JavaScript pour aller chercher ce que todo partir de cette zone de texte. Nous avons stocké que dans un tableau JavaScript, ce qui est fondamentalement comme notre représentation programmatique de cette liste de choses à faire, et puis nous avons imprimé it out. C'est todos.js. 

C'est plutôt cool, mais comment pouvons-nous aller plus loin? Eh bien, comme vous pouvez le voir, ce n'est pas comme un complet liste à faire. Par exemple, je ne peux pas marquer un de ces éléments comme étant incomplète, comme si je voulais revoir les priorités des éléments ou supprimer des éléments. C'est bien, mais on peut aller plus loin. Je ne vais pas trop parler de l'ajout de fonctionnalités supplémentaires, mais nous pourrions prendre que d'autres. Parlons d'ajouter une fonctionnalité de plus à cette liste de choses à faire, qui va être être en mesure de contrôler un individu chose à faire et ont-il être biffé, donc en gros dire que je l'ai fait. Regardons un peu de code qui pourrait accomplir cela. Remarquez ce que j'ai fait au sommet est j'ai ajouté un nouveau réseau mondial appelé complet. Je suis fondamentalement en utilisant ce soit pour stocker les éléments de la liste de choses à faire sont complets ou non. C'est une façon de le faire. Si je regarde la mise en œuvre de ce fait, l'affichage, fondamentalement, si j'entre dans une todo et j'appuie sur ce bouton à bascule il biffe, de sorte que chaque élément de cette liste a soit une complète ou incomplet, et j'utilise un autre tableau pour représenter cela. 

Fondamentalement, pour chaque todo dans ce tableau todos il ya un élément dans le tableau complet qui indique essentiellement si c'est complet ou non. J'ai dû faire des changements assez minimes à ce code, voici donc notre fonction addTodo. Remarquez qu'ici je suis poussant sur le tableau, et puis je pousse un 0 à cette gamme complète, essentiellement en parallèle avec ce nouveau todo poussoir à-dire J'ajoute cet article, et il est couplé avec cette valeur, ce qui signifie qu'il est incomplet. Et puis je suis redessiner la liste des choses à faire. Maintenant, remarquez, j'ai ajouté cette fonction drawTodoList. Cela prend une grande partie du code que nous avions avant, efface essentiellement sur la boîte, puis dessine la nouvelle liste à faire. Mais remarquez que l'intérieur de cette boucle for nous faisons un peu plus maintenant. Nous sommes fondamentalement vérifier si l'élément correspondant à la ième todo ici est terminée, et nous comporter différemment dans ces 2 cas. Si c'est complet, nous ajoutons cette balise del, qui est fondamentalement la façon dont vous pouvez obtenir cette grève par l'effet biffant la liste des choses à faire si c'est complet, et si c'est non, nous ne sommes pas compris cela. Et si ce genre de prend soin de cela, 

et c'est une façon d'y arriver. Et puis notez lorsque l'utilisateur clique sur l'un de ces Nous basculer l'état d'avancement de celui-ci. Lorsque l'utilisateur clique, nous allons inverser si elle a été achevée ou non, et puis nous allons redessiner. Ce genre de travaux. Nous avons ces fonctions qui effectuent leurs propres tâches, et c'est bien. Y at-il quelque chose que nous pourrions faire mieux à ce sujet, si? Notez que nous avons ces 2 tableaux mondiaux. Si ce n'était C, et nous avons eu 2 tableaux de ce genre de représenté données qui ont été en quelque sorte liés d'une certaine façon Que ferions-nous utiliser dans C à combiner ces 2 champs en quelque chose qui encapsule les éléments d'information? Quelqu'un veut-il faire une suggestion? [Étudiant de réponse inaudible] 

Exactement, afin que nous puissions utiliser une sorte de structure, et si vous repensez à, disons, pset 3, souviens que nous avions dictionnaire, et puis nous avons eu si le mot était dans le dictionnaire, et toutes ces informations a été mis en place à l'intérieur d'une structure de données. Une chose que je peux faire avec ce code pour éviter d'avoir ces 2 réseaux différents pour des informations similaires, c'est que je peux combiner en un objet JavaScript. Prenons un coup d'oeil. Remarquez que je n'ai qu'un seul tableau en haut maintenant et ce que j'ai fait est-et c'est juste la syntaxe JavaScript pour sorte d' création d'une version littérale d'un objet, et remarquez il ya 2 propriétés, nous avons donc le todo, et il est conservé avec si c'est complet ou incomplet. C'est du code très similaire. Nous utilisons les objets JavaScript. Ce genre de choses s'améliore. Comme maintenant, tous ces domaines de l'information connexe sont maintenus ensemble. Quand nous allons à l'imprimer, nous pouvons accéder aux champs. 

Remarquez comment nous faisons todos [i]. Complet au lieu de vérifier la gamme complète séparément, et remarquons quand nous voulons obtenir la chaîne de choses à faire que nous obtenons la propriété de choses à faire de ce todo, donc ce genre de logique, car chaque élément possède ces propriétés intrinsèques à ce sujet. Il a une todo, et il a si c'est complet ou non. Pas trop de changements il fonctionnellement, juste ajouté un peu plus au code. Il s'agit d'une amélioration sur certains fronts, non? Je veux dire, nous avons pris en compte le design un peu. Maintenant, nous avons des objets pour encapsuler essentiellement ces données. Y at-il quelque chose de plus que nous pourrions faire partir d'ici en termes de JavaScript? Comme l'avis que ce code ici pour obtenir le code HTML intérieur d'un div est un peu, je suppose, de long. Il ya document.getElementById ("todos"). InnerHTML. Une chose que nous pourrions faire pour rendre ce code air un peu plus sympa je ne voudrais pas avoir à garder le défilement gauche et à droite, d'avant en arrière, c'est que je pouvais utiliser une bibliothèque comme jQuery. 

Nous allons vérifier Séminaire 2, et c'est le même code, mais c'est fait avec jQuery. Vous ne pouvez pas être trop familier avec jQuery, mais sachez simplement que jQuery est une sorte de bibliothèque JavaScript qui le rend plus facile à faire des choses comme des éléments individuels d'accès du DOM. Ici, au lieu de dire document.getElementById ("todos"). InnerHTML Je peux utiliser la voie beaucoup plus propre dans jQuery, qui est juste à utiliser des sélecteurs. Comme vous pouvez le voir, ce code ne obtenir un peu plus propre, très fonctionnellement similaire, mais c'est l'idée. Nous avons vu un certain nombre de choses jusqu'ici, Nous avons commencé par la mise en œuvre JavaScript juste cru. Nous avons ajouté de nouvelles fonctionnalités et montré comment nous pouvons l'améliorer avec exactement ce que nous avons en JavaScript. 

Est-ce que quelqu'un voit des difficultés avec cette conception? À savoir, je suppose, ou pas nécessairement des difficultés, mais disons nous ne faisions pas un projet de liste de choses à faire, et demain, nous avons décidé nous voulions faire une liste d'épicerie ou un projet de liste d'achats. Beaucoup de ces caractéristiques sont très similaires. Beaucoup de choses que nous voulons sortir de JavaScript sont très fréquents, et cela souligne la nécessité d'une sorte de moyen de ce qui en fait plus facile à faire. J'ai dû construire tout de cet accès HTML, tout ceci accès DOM, comme je vais représenter la liste de choses à faire avec ce modèle. Et notez que je suis responsable en tant que développeur JavaScript pour garder le code HTML et JavaScript que j'ai dans la synchro. Rien automatiquement fait que la représentation JavaScript ou la liste des choses à faire sont poussés vers HTML. Rien appliquée que, sauf pour moi. Je devais écrire le tirage au sort à faire fonction de liste. Et qui ne peut être, je veux dire, il est raisonnable de le faire, mais il peut être fastidieux parfois. Si vous avez un projet plus vaste, qui pourrait être difficile. 

Cadres, l'un des buts des cadres est de simplifier ce processus et sorte de facteur sur ces commun-je suppose que vous pourriez dire des modèles de conception que les gens ont généralement une sorte de mode de représentation des données, si c'est une liste d'amis, si ce n'est des informations cartographiques ou quelque chose ou une liste de choses à faire. Certaines personnes ont généralement un mode de représentation de l'information, et ils ont généralement besoin de garder cette information en quelque sorte dans la synchro entre ce que l'utilisateur voit dans une sorte de point de vue, parler en termes de comme le modèle vue contrôleur que vous avez vu en cours, et puis le modèle, qui dans ce cas est ce tableau JavaScript. Cadres nous donnent un moyen de résoudre ce problème. Maintenant, nous allons jeter un oeil à la mise en œuvre de cette liste de choses à faire dans un cadre appelé angularjs. Ça y est. Notez qu'il tienne sur une diapositive. Je n'ai pas à défiler vers la gauche ou la droite. Ce n'est probablement pas une bonne raison de recommander l'utilisation d'un cadre, mais remarquez que je suis toujours accéder aux éléments HTML individuels ici? Vais-je jamais dans le DOM? Voyez-vous une document.getElementById ou quelque chose comme ça? Non, c'est parti. 

Angular nous aide à garder les DOM et JavaScript notre représentation de quelque chose genre de la synchronisation, si ce n'est pas dans le fichier js, s'il n'y a pas moyen d'obtenir par programmation à tous que le contenu HTML du JavaScript comment nous gardons cela en synchronisation? Si ce n'est pas dans le fichier js., Il faut que ce soit en HTML, non? C'est la nouvelle version du fichier HTML, Et remarquez, nous avons ajouté beaucoup de choses ici. Remarquez, il ya ces nouveaux attributs qui disent ng-clic et ng-répétition. L'approche angulaire pour résoudre ce problème des difficultés dans la conception est de faire essentiellement HTML beaucoup plus puissant. Angulaire est une façon de vous permettre de faire un peu plus expressive HTML. Par exemple, je peux dire que je vais attacher ou lier cette zone de texte à une variable dans mon code JavaScript angulaire. Cette ng-modèle est là pour ça. Qui dit en gros que l'intérieur de cette zone de texte de l'élément, juste associer cela avec le new_todo_description variables dans le code JavaScript. C'est très puissant parce que je n'ai pas à aller explicitement à le DOM pour obtenir cette information. Je n'ai pas à dire document.getElementById. Je n'ai pas à utiliser jQueries comme l'accès DOM. Je peux l'associer à une variable, puis quand je change cette variable au sein de JavaScript, il a gardé en synchronisation avec le code HTML, de sorte que simplifie le processus d'avoir à aller et venir entre les deux. Est-ce logique? 

Et remarquez qu'il n'ya pas de code d'accès HTML. Nous venons de faire HTML plus puissant, et maintenant, par exemple, nous pouvons faire des choses comme ça, comme lorsque vous cliquez dessus, appeler cette fonction dans le cadre de todos.js, et nous pourrions le faire avant, mais il ya d'autres choses, comme cette ng-modèle, et remarquez cette ng-répétition. Que pensez-vous cela ne? Voici notre liste non ordonnée d'avant. Nous avons les balises ul, Mais suis-je jamais rendu qui liste l'intérieur du code JavaScript? Je ne suis pas toujours rendu explicitement cette liste. Comment cela fonctionne? Eh bien, la façon angulaire accomplit c'est ce qu'on appelle un répéteur. En gros, cela dit que je veux imprimer cette HTML pour chaque intérieur todo de mon tableau de todos. A l'intérieur de todos.jr il ya un éventail de todos ici, et cela nous le dira go angulaire à travers ce tableau, et pour chaque élément vous voir Je veux que vous imprimez cette HTML. C'est un peu impressionnant parce que je peux juste faire sans avoir à écrire une boucle for, qui pour une liste de choses à faire qui n'était que de 30 lignes de code peut-être pas la chose la plus bénéfique, mais si vous avez un grand projet, cela pourrait être très pratique. 

C'est une solution à ce problème, ce qui rend HTML plus puissant, et qui nous permet de garder JavaScript et HTML dans la synchro. Il ya d'autres façons possibles de résoudre ce problème, et non chaque cadre fait cela. Non chaque cadre fonctionne le long de ces lignes. Certains cadres ont des approches différentes, et vous pouvez constater que vous aimez codage dans un cadre sur l'autre. Regardons un de plus. Il s'agit de la liste des choses à faire codé dans un cadre appelé Backbone. Je vais passer par ce rapidement. Je vais commencer par le HTML avant de nous y allons. Une seconde. En commençant par le HTML, comme vous le remarquez, notre HTML est très similaire à ce qu'elle était avant, donc pas trop de nouveau sur ce front. Mais notre fichier js est un peu différent. Backbone genre de a cette idée, ou repose sur l'idée que beaucoup de ce que nous faisons avec, par exemple, nos projets JavaScript est de penser à des modèles et des collections de ces modèles. Ce pourrait être, par exemple, une photo et des collections de photos, ou l'idée d'un ami et collections d'amis. Et souvent quand nous programmons applications JavaScript nous sorte de représenter l'idée d'avoir une collection d'amis en quelque sorte en JavaScript, et Backbone nous donne cette couche au-dessus des tableaux et des objets existants de JavaScript de faire des choses plus puissants avec qui plus facilement. 

Ici, j'ai défini un modèle de choses à faire, et vous n'avez pas à trop se soucier de la syntaxe, mais il faut noter que ce qui est l'une des propriétés de cette situation? Il dispose d'un domaine par défaut. Backbone me permet de spécifier déjà au large de la chauve-souris toute nouvelle à faire que je crée va avoir ces valeurs par défaut. Maintenant, je peux personnaliser cela, mais être capable de spécifier les paramètres par défaut est agréable, et c'est le genre de pratique parce que ce n'est pas quelque chose qui est comme inhérente à JavaScript, et maintenant je n'ai pas à explicitement disent que les todos sont incomplètes. Je peux vous dire dès le départ que todos vont être marqué comme incomplet. Remarquez alors c'est quoi? Maintenant, j'ai une liste de choses à faire, et c'est une collection. Remarquez le champ associé à ce modèle dit todo. C'est ma façon de dire que Backbone Je vais penser à une collection de ces todos individuels. Il s'agit essentiellement de la structure du modèle pour mon programme. Ici, j'ai cette idée d'une collection, et essentiellement les articles contenus dans cette collection vont tous être ces todos, et c'est bien naturel en ce sens parce que je fais avoir todos, et je les ai dans une collection. 

Regardons d'un peu plus de cela. Voici une vue de Backbone. L'autre chose qui Backbone dit, c'est que un grand nombre de modèles que vous pensez ou même des collections vont avoir besoin d'avoir une certaine façon d'être affiché. Nous devons rendre cette liste de choses à faire, et ça ne serait pas bien si nous pouvions fournir pour chaque modèle ou associer à chaque modèle ce point de vue qui nous permet d'J'imagine relier les deux ensemble? Alors qu'auparavant, nous devions utiliser une boucle for qui irait à travers chaque todo dans notre liste et puis imprimez-le ici nous pouvons fondamentalement connecter avec ce modèle. C'est une vue des choses à faire. Ceci est associé à la todo nous avons trouvé plus tôt. Maintenant, chaque todo est affichable ou renderable par cette vue des choses à faire. Remarquez certains champs. Que pensez-vous de cette tagName est, tagName: li? Rappelez-vous de devant quand nous avons voulu rendre un todo nous aurions à associer explicitement nos todos avec cette balise li. Maintenant, nous disons que là où cette todo va vivre va être à l'intérieur d'une balise li. Et maintenant, nous sommes également associer des événements avec nos todos. 

Chaque todo a ce seul événement. Si vous cliquez sur à peu près le bouton à bascule, c'est ce que je dis là, alors essentiellement marquer le todo comme le contraire de ce qu'elle était avant et puis re-rendre l'application. C'est un peu similaire au code avant. Rappelez-vous quand nous avons marqué comme soit le contraire ou- et puis nous avons re-rendue. Mais remarquez maintenant cet événement sert à quelque chose qui était dans le code HTML. Il était assis là. Le bouton a eu un clic sur. Lorsque vous cliquez sur le bouton, il genre de fait les choses à mis en place que todo est incomplet. Ici, nous avons associé ce cas de cliquer sur ce bouton à bascule et l'inversion que ce soit sur ou hors de ce point de vue. 

C'est une belle façon de mettre en place cet événement de sorte qu'il est très étroitement lié ce point de vue, et ainsi de remarquer ce un de plus. J'ai cette méthode de rendu, et nous n'avons pas à entrer dans les détails. C'est un peu similaire à ce que nous avions avant, mais notez que je ne suis pas une boucle à travers n'importe quoi. Je ne suis pas l'impression que balise ul c'est une sorte de dire que je vais imprimer tous les éléments. Je fournis les fonctionnalités pour rendre celui-chose à faire. Il s'agit d'un concept très puissant parce que fondamentalement notre to-do list se compose de tous ces todos, et si l'on peut en principe préciser le moyen de rendre l'un de ceux todos alors nous pouvons avoir notre puissant backbone en soi rendre tous les todos en appelant la méthode de rendu sur les todos individuels. C'est un concept qui est utile ici. Maintenant, une bonne question à poser est de savoir comment est cette application étant mis ensemble? Parce que nous avons la possibilité de rendre une todo, mais comment pouvons-nous l'idée de multiples todos? 

Prenons un coup d'oeil. Il s'agit de la dernière partie. Notez que nous avons une vue de liste de choses à faire ici, et remarquez que c'est aussi un point de vue. Et pour aller sur un certain nombre de choses, cette méthode initialize sera appelée quand nous créons d'abord cette liste de choses à faire. Comme vous pouvez le voir, c'est comme la création de la liste de choses à faire et l'associer à ce point de vue. Et puis j'ai ajouté les fonctions ici, donc essentiellement lorsque vous ajoutez un élément- ce qui est similaire à la méthode addItem nous avons vu avant- Je vais créer un nouvel objet todo, et remarquez que je suis en train d'appeler cette nouvelle méthode todo, si cela est prévu par Backbone, et je peux passer mes propriétés ici. Et maintenant, chaque todo que je crée avec cette obtiendra cette fonctionnalité que nous avons vu auparavant. Remarquez que je suis compensation sur la zone de texte avant un petit peu du détail et puis je vais ajouter cette collection. 

Cela semble presque bizarre car avant nous avons juste eu à le faire todos.push, et puis nous avons fait, et cela peut sembler plus compliqué pour ce projet particulier, et vous pouvez constater que Backbone voire angulaire ou tout autre cadre ne convient pas à votre projet particulier, mais je pense qu'il est important de penser à ce que cela signifie sur une plus grande échelle pour les grands projets, parce que si nous avions un projet plus vaste où nous représentions certains collection très complexe, quelque chose de plus profond que juste une liste de choses à faire, disons une liste d'amis ou quelque chose comme ça, cela pourrait être utile parce que nous pourrions organiser notre code d'une manière très pratique, d'une manière qui rendrait plus facile pour quelqu'un d'autre qui a voulu ramasser un projet visant à construire. Vous pouvez voir que cela donne beaucoup de la structure. Et puis je vais appeler rendre sur cette addItem. Render, comme vous pouvez le voir, et vous n'avez pas à saisir cette syntaxe complète, mais, fondamentalement, pour chaque modèle, il va appeler la méthode de rendu individuel. C'est en quelque sorte où cela vient. Précisons simplement comment rendre les todos individuels, et puis nous allons les coller ensemble comme un tout. Mais cela fournit un moyen de l'abstraction, parce que je pouvais changer ma façon de décider de rendre la todos individuels, et je ne voudrais pas avoir à changer tout de ce code. C'est plutôt cool. 

Quelqu'un at-il des questions au sujet des frameworks JavaScript? [Inaudible question des étudiants] Oh, bien sûr, c'est une excellente question. La question était de savoir comment ai-je inclure les cadres? La plupart des frameworks JavaScript sont fondamentalement juste js que vous pouvez inclure dans le haut de votre code. Notez que dans la partie de tête de ma HTML j'ai toutes ces balises de script, et l'étiquette finale du script est le code que nous avons écrit. Et puis, les codes de cadre 3 sont juste également des balises script. Je les y compris de ce qu'on appelle un CDN, ce qui me permet de l'obtenir de quelqu'un d'autre à ce stade mais chaque cadre a cette-vous pouvez très bien trouver le contenu pour une bibliothèque JavaScript notamment disponible sur certains CDN ou quelque chose comme ça, et puis vous pouvez inclure ces balises script. Est-ce logique? Cool. 

Ce sont 2 approches différentes. Ce ne sont pas les seuls moyens de résoudre ce problème. Il ya beaucoup de choses différentes qui quelqu'un pourrait le faire, et il ya de nombreux cadres là-bas. Angulaires et Backbone ne disent pas toute l'histoire. Bonne chance dans vos projets de fin, et je vous remercie beaucoup. [CS50.TV]