1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Séminaire] [Frameworks JavaScript: pourquoi et comment?]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Université de Harvard]

3
00:00:04,000 --> 00:00:06,960
[C'est CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Salut tout le monde. Bienvenue au séminaire des cadres du JavaScript.

5
00:00:10,630 --> 00:00:14,910
Mon nom est Kevin, et aujourd'hui, je vais parler de frameworks JavaScript,

6
00:00:14,910 --> 00:00:20,400
et l'objectif de ce séminaire est de ne pas vous rendre à, disons, maîtriser un cadre particulier en soi

7
00:00:20,400 --> 00:00:23,810
mais pour vous donner une introduction générale à un couple de cadres

8
00:00:23,810 --> 00:00:27,150
et montrer pourquoi nous ne voudrait jamais utiliser un cadre.

9
00:00:27,150 --> 00:00:31,060
>> Avant de le faire, je vais vous donner un peu de fond en JavaScript,

10
00:00:31,060 --> 00:00:33,750
et puis nous allons prendre à partir de là.

11
00:00:33,750 --> 00:00:36,270
Nous allons commencer par mettre en œuvre une liste de choses à faire.

12
00:00:36,270 --> 00:00:39,330
Voici notre liste de tâches pour aujourd'hui.

13
00:00:39,330 --> 00:00:41,990
C'est un peu drôle. Nous devons mettre en œuvre une liste de choses à faire en JavaScript.

14
00:00:41,990 --> 00:00:45,110
C'est ce que ça va ressembler, donc c'est notre premier but.

15
00:00:45,110 --> 00:00:47,160
Nous n'allons pas utiliser un cadre pour le faire.

16
00:00:47,160 --> 00:00:51,930
Nous allons code JavaScript et obtenir la liste des choses à faire au travail.

17
00:00:51,930 --> 00:00:54,370
Ensuite, nous allons améliorer la conception sans l'aide d'un cadre.

18
00:00:54,370 --> 00:00:57,190
Nous allons discuter de diverses choses que nous pouvons faire avec juste JavaScript seul

19
00:00:57,190 --> 00:01:00,650
pour rendre notre to-do list un peu plus bien conçu.

20
00:01:00,650 --> 00:01:02,490
Ensuite, nous allons jeter un peu jQuery,

21
00:01:02,490 --> 00:01:05,030
et puis nous allons regarder la même liste de choses à faire,

22
00:01:05,030 --> 00:01:07,170
juste mis en œuvre dans différents cadres, et nous discuterons

23
00:01:07,170 --> 00:01:09,280
 les avantages et les inconvénients long du chemin.

24
00:01:09,280 --> 00:01:12,040
>> Commençons mise en œuvre de cette liste de choses à faire.

25
00:01:12,040 --> 00:01:14,270
Disons que nous sommes donné cette HTML.

26
00:01:14,270 --> 00:01:16,620
Je vais en faire un peu plus petit.

27
00:01:16,620 --> 00:01:19,300
Comme vous pouvez le voir, j'ai une petite tête qui dit Todo

28
00:01:19,300 --> 00:01:21,740
et une petite boîte où je peux entrer dans une description d'un todo

29
00:01:21,740 --> 00:01:26,990
puis un nouveau bouton d'article, nous allons donc essayer d'entrer dans une nouvelle todo à cette liste.

30
00:01:26,990 --> 00:01:31,000
Donner un séminaire de cadres JavaScript,

31
00:01:31,000 --> 00:01:33,090
et je suis à frapper nouvel élément.

32
00:01:33,090 --> 00:01:35,730
Je reçois cette alerte JavaScript qui dit appliquer moi.

33
00:01:35,730 --> 00:01:37,560
Nous avons à mettre en œuvre.

34
00:01:37,560 --> 00:01:41,490
Voyons maintenant le code pour ce faire, à la fois le HTML et le JavaScript.

35
00:01:41,490 --> 00:01:43,260
Voici notre HTML.

36
00:01:43,260 --> 00:01:45,500
Comme vous pouvez le voir ici, voici notre petite tête de Todos.

37
00:01:45,500 --> 00:01:47,620
C'était cette chose gras en haut,

38
00:01:47,620 --> 00:01:50,690
et puis nous avons la zone de saisie avec l'espace réservé,

39
00:01:50,690 --> 00:01:59,460
et puis il ya un certain attribut de ce bouton qui appelle cette fonction addTodo.

40
00:01:59,460 --> 00:02:05,460
Quelqu'un veut-il deviner ce que le clic est signifiant?

41
00:02:05,460 --> 00:02:07,390
[Étudiant de réponse inaudible]

42
00:02:07,390 --> 00:02:09,289
Bon, le clic sur un peu comme un événement,

43
00:02:09,289 --> 00:02:12,120
comme un clic de souris est juste un événement, et ce que nous faisons

44
00:02:12,120 --> 00:02:16,890
est Nous attachons le cas de clic sur ce bouton pour exécuter cette fonction.

45
00:02:16,890 --> 00:02:21,700
AddTodo est ce gestionnaire d'événements pour cliquant sur ce bouton.

46
00:02:21,700 --> 00:02:25,010
>> Comme vous pouvez le voir, lorsque je clique sur le bouton Nouvel élément

47
00:02:25,010 --> 00:02:29,940
l'événement de clic sur obtient mis le feu, et cette fonction est appelée.

48
00:02:29,940 --> 00:02:33,170
Regardons fonction.

49
00:02:33,170 --> 00:02:36,260
Comme vous pouvez le voir, voici mon code JavaScript jusqu'à présent.

50
00:02:36,260 --> 00:02:41,280
Ce que j'ai en tête est une structure de données globale pour ma to-do list.

51
00:02:41,280 --> 00:02:44,060
Il ressemble à un tableau. C'est juste un tableau vide.

52
00:02:44,060 --> 00:02:47,100
Et puis j'ai la fonction addTodo que nous avons vu plus tôt,

53
00:02:47,100 --> 00:02:50,740
et la seule ligne de code, il ya cette alerte.

54
00:02:50,740 --> 00:02:55,730
Il avertit en œuvre moi, et puis j'ai 2 tâches à accomplir.

55
00:02:55,730 --> 00:02:58,790
Je dois ajouter la todo pour que la structure globale des données,

56
00:02:58,790 --> 00:03:01,860
et puis je veux faire ressortir la liste des choses à faire.

57
00:03:01,860 --> 00:03:06,360
Rien d'extraordinaire pour l'instant, mais JavaScript vous pouvez ne pas être familiers avec,

58
00:03:06,360 --> 00:03:12,370
donc je vais y aller doucement et de revoir les fondements de JavaScript dans ce sens.

59
00:03:12,370 --> 00:03:15,490
>> Donnons-ce un coup de feu.

60
00:03:15,490 --> 00:03:21,130
Disons que l'utilisateur saisit quelque chose dans cette case.

61
00:03:21,130 --> 00:03:23,360
J'ai juste tapé quelque chose ici, texte.

62
00:03:23,360 --> 00:03:27,620
Comment puis-je trier d'accès que le texte via JavaScript?

63
00:03:27,620 --> 00:03:32,500
Rappelez-vous que JavaScript, une de ses caractéristiques fondamentales est qu'il nous donne

64
00:03:32,500 --> 00:03:34,670
cet accès programmatique au DOM.

65
00:03:34,670 --> 00:03:40,670
Il nous permet d'accéder aux éléments et leurs propriétés de ce HTML réelle.

66
00:03:40,670 --> 00:03:43,430
La façon dont nous le faisons avec Bare Bones JavaScript

67
00:03:43,430 --> 00:03:51,360
c'est que nous pouvons réellement utiliser une fonction en JavaScript appelé getElementByID.

68
00:03:51,360 --> 00:03:55,140
Je veux stocker le texte qui est là tapé dans une variable,

69
00:03:55,140 --> 00:03:58,350
donc je vais dire une nouvelle variable appelée new_todo,

70
00:03:58,350 --> 00:04:01,980
et je vais prendre cet élément.

71
00:04:01,980 --> 00:04:06,330
Il s'agit d'une fonction. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Et maintenant, je me fais un élément par ID, donc j'ai besoin de l'identification de la zone de texte,

73
00:04:11,580 --> 00:04:15,860
alors je lui ai donné le new_todo_description d'identité.

74
00:04:15,860 --> 00:04:18,399
Voilà comment je vais me faire un élément.

75
00:04:18,399 --> 00:04:23,880
C'est mon argument à cette fonction, pour spécifier les ID à obtenir.

76
00:04:23,880 --> 00:04:28,110
Et donc c'est un élément HTML, et il a des propriétés.

77
00:04:28,110 --> 00:04:30,650
Vous avez vu ces derniers. Ils sont les attributs.

78
00:04:30,650 --> 00:04:37,090
L'attribut de l'élément de texte qui stocke l'entrée de l'utilisateur est appelé valeur.

79
00:04:37,090 --> 00:04:40,860
J'ai gardé la valeur de cette zone de texte maintenant dans cette variable appelée new_todo.

80
00:04:40,860 --> 00:04:45,040
Maintenant, j'ai un accès par programme à cette variable, ce qui est plutôt cool

81
00:04:45,040 --> 00:04:49,200
parce que maintenant ce que je peux faire, c'est que je peux ajouter à ma liste à faire.

82
00:04:49,200 --> 00:04:52,870
>> La façon dont nous le ferions en JavaScript, et ne vous inquiétez pas si vous n'êtes pas familier avec cela,

83
00:04:52,870 --> 00:04:57,010
mais juste en passant par il est todos.push

84
00:04:57,010 --> 00:05:00,130
parce que c'est le nom de ma structure globale des données ici,

85
00:05:00,130 --> 00:05:04,450
et je vais pousser new_todo.

86
00:05:04,450 --> 00:05:09,120
C'est super parce que maintenant je l'ai ajouté à ma JavaScript

87
00:05:09,120 --> 00:05:11,280
représentation de cette liste à faire.

88
00:05:11,280 --> 00:05:15,170
Mais maintenant, comment puis-je le récupérer pour le HTML?

89
00:05:15,170 --> 00:05:18,560
Je dois trouver un moyen de trier de le repousser.

90
00:05:18,560 --> 00:05:21,830
En d'autres termes, j'ai en quelque sorte dois dessiner ça.

91
00:05:21,830 --> 00:05:26,060
Ce que nous allons faire, c'est que nous allons tirer la liste de choses à faire.

92
00:05:26,060 --> 00:05:29,270
J'ai besoin de mettre à jour d'autres HTML sur cette page,

93
00:05:29,270 --> 00:05:32,040
et comme vous pouvez le voir, j'ai laissé ce petit récipient ici,

94
00:05:32,040 --> 00:05:36,840
ce diviseur de la page dont l'ID est todos,

95
00:05:36,840 --> 00:05:40,870
et je vais mettre la liste de choses à faire là-bas.

96
00:05:40,870 --> 00:05:47,240
D'abord, je vais l'effacer parce que, par exemple, il y avait une vieille liste à faire là-bas.

97
00:05:47,240 --> 00:05:49,560
Je reçois cet élément par ID à nouveau,

98
00:05:49,560 --> 00:05:54,530
et je accéder au HTML interne de cet élément,

99
00:05:54,530 --> 00:05:58,010
et je vais tirer cela au clair.

100
00:05:58,010 --> 00:06:05,510
Si nous avons quitté ce code tel quel, nous verrions un rien vide là-bas,

101
00:06:05,510 --> 00:06:10,410
et maintenant je veux commencer à rendre ma nouvelle liste de choses à faire.

102
00:06:10,410 --> 00:06:12,870
Je suis fondamentalement va anéantir ma to-do list.

103
00:06:12,870 --> 00:06:18,180
>> Maintenant l'intérieur HTML interne de cette todos div est tout à fait clair,

104
00:06:18,180 --> 00:06:20,060
et maintenant j'ai besoin pour commencer à ajouter ma liste.

105
00:06:20,060 --> 00:06:23,890
La première chose que je tiens à rajouter est la balise de liste non ordonnée,

106
00:06:23,890 --> 00:06:33,890
qui désigne essentiellement que c'est le début d'une liste non ordonnée.

107
00:06:33,890 --> 00:06:39,770
Maintenant, pour chaque élément dans mon tableau de todos je veux imprimer à l'intérieur de ce HTML.

108
00:06:39,770 --> 00:06:43,710
Je tiens à ajouter sur le fond de cette liste.

109
00:06:43,710 --> 00:06:49,040
Tout comme en C, je peux utiliser une boucle, et je vais commencer au début de ma liste

110
00:06:49,040 --> 00:06:54,140
à l'élément 0, et je vais y aller tout le chemin à la longueur de la liste.

111
00:06:54,140 --> 00:07:01,100
Nous pouvons réellement obtenir la longueur d'un tableau en JavaScript en utilisant la propriété de longueur.

112
00:07:01,100 --> 00:07:03,420
Fondamentalement, je vais faire quelque chose de très similaire à l'intérieur de ici

113
00:07:03,420 --> 00:07:05,600
pour imprimer l'élément.

114
00:07:05,600 --> 00:07:12,970
Je peux à nouveau accéder à la div todos, la propriété HTML interne de cela,

115
00:07:12,970 --> 00:07:17,560
et je vais ajouter à ce nouvel élément de liste, et que ça va être entouré par

116
00:07:17,560 --> 00:07:25,390
cette balise li, et je vais enchaîner avec l'opérateur +,

117
00:07:25,390 --> 00:07:28,040
et c'est le ième élément de mon tableau todos,

118
00:07:28,040 --> 00:07:32,380
et puis je vais fermer cette balise.

119
00:07:32,380 --> 00:07:36,240
Maintenant, pour chaque élément, nous allons ajouter une nouvelle entrée dans la liste.

120
00:07:36,240 --> 00:07:48,700
Et puis tout ce que nous devons vraiment faire est de fermer cette balise.

121
00:07:48,700 --> 00:07:52,820
J'ai juste besoin de fermer cette non-ordonnées tag de liste.

122
00:07:52,820 --> 00:07:55,490
>> Avez-vous une idée de comment ça fonctionne?

123
00:07:55,490 --> 00:07:57,700
Cela ouvre la liste entière.

124
00:07:57,700 --> 00:08:01,080
Cela ajoute des éléments individuels de la liste todos à la liste,

125
00:08:01,080 --> 00:08:05,470
et puis qui ferme la liste entière, et c'est ma fonction addTodo.

126
00:08:05,470 --> 00:08:09,590
Je commence en fait en obtenant le todo de la zone de texte.

127
00:08:09,590 --> 00:08:18,950
J'ajoute que pour le tableau todos, puis je re-rendre la liste des choses à faire.

128
00:08:18,950 --> 00:08:21,520
Maintenant, je peux ajouter des articles à ma liste.

129
00:08:21,520 --> 00:08:24,620
C'est assez excitant car en quelques lignes de code

130
00:08:24,620 --> 00:08:28,240
nous avons essentiellement fait une liste de choses à faire là où nous pouvons ajouter des éléments.

131
00:08:28,240 --> 00:08:30,050
Grand.

132
00:08:30,050 --> 00:08:34,480
C'est en quelque sorte d'une introduction de base à JavaScript.

133
00:08:34,480 --> 00:08:36,179
Ne vous inquiétez pas trop sur la syntaxe pour l'instant,

134
00:08:36,179 --> 00:08:38,130
mais pensez à ce point de vue conceptuel.

135
00:08:38,130 --> 00:08:40,539
Nous avons eu quelques HTML.

136
00:08:40,539 --> 00:08:45,310
Nous avons eu une zone de texte sur la page que, fondamentalement, permet aux utilisateurs de saisir un objet à faire à ajouter.

137
00:08:45,310 --> 00:08:49,210
Et puis nous avons utilisé JavaScript pour aller chercher ce que todo partir de cette zone de texte.

138
00:08:49,210 --> 00:08:52,830
Nous avons stocké que dans un tableau JavaScript, ce qui est fondamentalement comme

139
00:08:52,830 --> 00:08:56,010
notre représentation programmatique de cette liste de choses à faire,

140
00:08:56,010 --> 00:08:59,060
et puis nous avons imprimé it out.

141
00:08:59,060 --> 00:09:02,690
C'est todos.js.

142
00:09:02,690 --> 00:09:07,620
>> C'est plutôt cool, mais comment pouvons-nous aller plus loin?

143
00:09:07,620 --> 00:09:11,350
Eh bien, comme vous pouvez le voir, ce n'est pas comme un complet liste à faire.

144
00:09:11,350 --> 00:09:15,100
Par exemple, je ne peux pas marquer un de ces éléments comme étant incomplète,

145
00:09:15,100 --> 00:09:19,920
comme si je voulais revoir les priorités des éléments ou supprimer des éléments.

146
00:09:19,920 --> 00:09:23,150
C'est bien, mais on peut aller plus loin.

147
00:09:23,150 --> 00:09:29,280
Je ne vais pas trop parler de l'ajout de fonctionnalités supplémentaires,

148
00:09:29,280 --> 00:09:32,800
mais nous pourrions prendre que d'autres.

149
00:09:32,800 --> 00:09:35,970
Parlons d'ajouter une fonctionnalité de plus à cette liste de choses à faire,

150
00:09:35,970 --> 00:09:40,370
qui va être être en mesure de contrôler un individu chose à faire

151
00:09:40,370 --> 00:09:44,780
et ont-il être biffé, donc en gros dire que je l'ai fait.

152
00:09:44,780 --> 00:09:50,240
Regardons un peu de code qui pourrait accomplir cela.

153
00:09:50,240 --> 00:09:52,740
Remarquez ce que j'ai fait au sommet est j'ai ajouté

154
00:09:52,740 --> 00:09:57,620
un nouveau réseau mondial appelé complet.

155
00:09:57,620 --> 00:10:02,890
Je suis fondamentalement en utilisant ce soit pour stocker les éléments de la liste de choses à faire

156
00:10:02,890 --> 00:10:06,560
sont complets ou non.

157
00:10:06,560 --> 00:10:08,470
C'est une façon de le faire.

158
00:10:08,470 --> 00:10:13,750
Si je regarde la mise en œuvre de ce fait, l'affichage,

159
00:10:13,750 --> 00:10:21,120
fondamentalement, si j'entre dans une todo et j'appuie sur ce bouton à bascule

160
00:10:21,120 --> 00:10:25,040
il biffe, de sorte que chaque élément de cette liste a soit une complète

161
00:10:25,040 --> 00:10:31,050
ou incomplet, et j'utilise un autre tableau pour représenter cela.

162
00:10:31,050 --> 00:10:33,730
>> Fondamentalement, pour chaque todo dans ce tableau todos

163
00:10:33,730 --> 00:10:37,110
il ya un élément dans le tableau complet qui indique essentiellement

164
00:10:37,110 --> 00:10:39,060
si c'est complet ou non.

165
00:10:39,060 --> 00:10:41,640
J'ai dû faire des changements assez minimes à ce code,

166
00:10:41,640 --> 00:10:44,470
voici donc notre fonction addTodo.

167
00:10:44,470 --> 00:10:48,530
Remarquez qu'ici je suis poussant sur le tableau,

168
00:10:48,530 --> 00:10:51,300
et puis je pousse un 0 à cette gamme complète,

169
00:10:51,300 --> 00:10:57,090
essentiellement en parallèle avec ce nouveau todo poussoir à-dire

170
00:10:57,090 --> 00:11:00,430
J'ajoute cet article, et il est couplé avec cette valeur,

171
00:11:00,430 --> 00:11:02,810
ce qui signifie qu'il est incomplet.

172
00:11:02,810 --> 00:11:04,970
Et puis je suis redessiner la liste des choses à faire.

173
00:11:04,970 --> 00:11:09,220
Maintenant, remarquez, j'ai ajouté cette fonction drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Cela prend une grande partie du code que nous avions avant,

175
00:11:11,760 --> 00:11:15,320
efface essentiellement sur la boîte, puis dessine la nouvelle liste à faire.

176
00:11:15,320 --> 00:11:19,620
Mais remarquez que l'intérieur de cette boucle for nous faisons un peu plus maintenant.

177
00:11:19,620 --> 00:11:25,000
Nous sommes fondamentalement vérifier si l'élément correspondant à la ième todo ici

178
00:11:25,000 --> 00:11:30,220
est terminée, et nous comporter différemment dans ces 2 cas.

179
00:11:30,220 --> 00:11:32,790
Si c'est complet, nous ajoutons cette balise del,

180
00:11:32,790 --> 00:11:35,360
qui est fondamentalement la façon dont vous pouvez obtenir cette grève par l'effet

181
00:11:35,360 --> 00:11:38,190
biffant la liste des choses à faire si c'est complet,

182
00:11:38,190 --> 00:11:42,200
et si c'est non, nous ne sommes pas compris cela.

183
00:11:42,200 --> 00:11:45,030
Et si ce genre de prend soin de cela,

184
00:11:45,030 --> 00:11:49,140
>> et c'est une façon d'y arriver.

185
00:11:49,140 --> 00:11:53,420
Et puis notez lorsque l'utilisateur clique sur l'un de ces

186
00:11:53,420 --> 00:11:56,780
Nous basculer l'état d'avancement de celui-ci.

187
00:11:56,780 --> 00:12:02,170
Lorsque l'utilisateur clique, nous allons inverser si elle a été achevée ou non,

188
00:12:02,170 --> 00:12:04,540
et puis nous allons redessiner.

189
00:12:04,540 --> 00:12:06,190
Ce genre de travaux.

190
00:12:06,190 --> 00:12:09,860
Nous avons ces fonctions qui effectuent leurs propres tâches,

191
00:12:09,860 --> 00:12:11,730
et c'est bien.

192
00:12:11,730 --> 00:12:14,110
Y at-il quelque chose que nous pourrions faire mieux à ce sujet, si?

193
00:12:14,110 --> 00:12:18,700
Notez que nous avons ces 2 tableaux mondiaux.

194
00:12:18,700 --> 00:12:23,550
Si ce n'était C, et nous avons eu 2 tableaux de ce genre de représenté

195
00:12:23,550 --> 00:12:25,800
données qui ont été en quelque sorte liés d'une certaine façon

196
00:12:25,800 --> 00:12:30,140
Que ferions-nous utiliser dans C à combiner ces 2 champs

197
00:12:30,140 --> 00:12:35,420
en quelque chose qui encapsule les éléments d'information?

198
00:12:35,420 --> 00:12:37,600
Quelqu'un veut-il faire une suggestion?

199
00:12:37,600 --> 00:12:39,450
[Étudiant de réponse inaudible]

200
00:12:39,450 --> 00:12:42,340
>> Exactement, afin que nous puissions utiliser une sorte de structure,

201
00:12:42,340 --> 00:12:44,960
et si vous repensez à, disons, pset 3,

202
00:12:44,960 --> 00:12:47,350
souviens que nous avions dictionnaire, et puis nous avons eu si le mot

203
00:12:47,350 --> 00:12:50,230
était dans le dictionnaire, et toutes ces informations a été mis en place

204
00:12:50,230 --> 00:12:52,420
à l'intérieur d'une structure de données.

205
00:12:52,420 --> 00:12:56,390
Une chose que je peux faire avec ce code pour éviter d'avoir ces 2 réseaux différents

206
00:12:56,390 --> 00:13:01,760
pour des informations similaires, c'est que je peux combiner en un objet JavaScript.

207
00:13:01,760 --> 00:13:07,150
Prenons un coup d'oeil.

208
00:13:07,150 --> 00:13:11,740
Remarquez que je n'ai qu'un seul tableau en haut maintenant

209
00:13:11,740 --> 00:13:17,650
et ce que j'ai fait est-et c'est juste la syntaxe JavaScript pour sorte d'

210
00:13:17,650 --> 00:13:21,350
création d'une version littérale d'un objet,

211
00:13:21,350 --> 00:13:24,670
et remarquez il ya 2 propriétés, nous avons donc le todo,

212
00:13:24,670 --> 00:13:29,660
et il est conservé avec si c'est complet ou incomplet.

213
00:13:29,660 --> 00:13:31,000
C'est du code très similaire.

214
00:13:31,000 --> 00:13:35,310
Nous utilisons les objets JavaScript.

215
00:13:35,310 --> 00:13:38,600
Ce genre de choses s'améliore.

216
00:13:38,600 --> 00:13:43,850
Comme maintenant, tous ces domaines de l'information connexe sont maintenus ensemble.

217
00:13:43,850 --> 00:13:46,410
Quand nous allons à l'imprimer, nous pouvons accéder aux champs.

218
00:13:46,410 --> 00:13:49,060
>> Remarquez comment nous faisons todos [i]. Complet

219
00:13:49,060 --> 00:13:52,880
au lieu de vérifier la gamme complète séparément,

220
00:13:52,880 --> 00:13:56,560
et remarquons quand nous voulons obtenir la chaîne de choses à faire que nous obtenons la propriété de choses à faire

221
00:13:56,560 --> 00:13:58,750
de ce todo, donc ce genre de logique, car

222
00:13:58,750 --> 00:14:01,660
chaque élément possède ces propriétés intrinsèques à ce sujet.

223
00:14:01,660 --> 00:14:05,650
Il a une todo, et il a si c'est complet ou non.

224
00:14:05,650 --> 00:14:11,540
Pas trop de changements il fonctionnellement, juste ajouté un peu plus au code.

225
00:14:11,540 --> 00:14:13,430
Il s'agit d'une amélioration sur certains fronts, non?

226
00:14:13,430 --> 00:14:16,030
Je veux dire, nous avons pris en compte le design un peu.

227
00:14:16,030 --> 00:14:20,350
Maintenant, nous avons des objets pour encapsuler essentiellement ces données.

228
00:14:20,350 --> 00:14:27,130
Y at-il quelque chose de plus que nous pourrions faire partir d'ici en termes de JavaScript?

229
00:14:27,130 --> 00:14:31,810
Comme l'avis que ce code ici

230
00:14:31,810 --> 00:14:34,760
pour obtenir le code HTML intérieur d'un div

231
00:14:34,760 --> 00:14:40,520
est un peu, je suppose, de long.

232
00:14:40,520 --> 00:14:45,100
Il ya document.getElementById ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Une chose que nous pourrions faire pour rendre ce code air un peu plus sympa

234
00:14:48,400 --> 00:14:51,450
je ne voudrais pas avoir à garder le défilement gauche et à droite, d'avant en arrière,

235
00:14:51,450 --> 00:14:58,480
c'est que je pouvais utiliser une bibliothèque comme jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Nous allons vérifier Séminaire 2,

237
00:15:02,710 --> 00:15:05,880
et c'est le même code, mais c'est fait avec jQuery.

238
00:15:05,880 --> 00:15:08,790
Vous ne pouvez pas être trop familier avec jQuery,

239
00:15:08,790 --> 00:15:11,510
mais sachez simplement que jQuery est une sorte de bibliothèque JavaScript

240
00:15:11,510 --> 00:15:15,910
qui le rend plus facile à faire des choses comme des éléments individuels d'accès du DOM.

241
00:15:15,910 --> 00:15:21,280
Ici, au lieu de dire document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Je peux utiliser la voie beaucoup plus propre dans jQuery,

243
00:15:25,210 --> 00:15:28,490
qui est juste à utiliser des sélecteurs.

244
00:15:28,490 --> 00:15:31,300
Comme vous pouvez le voir, ce code ne obtenir un peu plus propre,

245
00:15:31,300 --> 00:15:35,770
très fonctionnellement similaire, mais c'est l'idée.

246
00:15:35,770 --> 00:15:37,980
Nous avons vu un certain nombre de choses jusqu'ici,

247
00:15:37,980 --> 00:15:42,010
Nous avons commencé par la mise en œuvre JavaScript juste cru.

248
00:15:42,010 --> 00:15:45,370
Nous avons ajouté de nouvelles fonctionnalités et montré comment nous pouvons l'améliorer avec

249
00:15:45,370 --> 00:15:49,090
exactement ce que nous avons en JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Est-ce que quelqu'un voit des difficultés avec cette conception?

251
00:15:53,300 --> 00:16:01,090
À savoir, je suppose, ou pas nécessairement des difficultés, mais disons

252
00:16:01,090 --> 00:16:04,830
nous ne faisions pas un projet de liste de choses à faire, et demain, nous avons décidé

253
00:16:04,830 --> 00:16:10,320
nous voulions faire une liste d'épicerie ou un projet de liste d'achats.

254
00:16:10,320 --> 00:16:14,150
Beaucoup de ces caractéristiques sont très similaires.

255
00:16:14,150 --> 00:16:19,080
Beaucoup de choses que nous voulons sortir de JavaScript sont très fréquents,

256
00:16:19,080 --> 00:16:23,820
et cela souligne la nécessité d'une sorte de moyen de

257
00:16:23,820 --> 00:16:25,670
ce qui en fait plus facile à faire.

258
00:16:25,670 --> 00:16:30,400
J'ai dû construire tout de cet accès HTML, tout ceci accès DOM,

259
00:16:30,400 --> 00:16:35,530
comme je vais représenter la liste de choses à faire avec ce modèle.

260
00:16:35,530 --> 00:16:39,130
Et notez que je suis responsable en tant que développeur JavaScript

261
00:16:39,130 --> 00:16:42,890
pour garder le code HTML et JavaScript que j'ai dans la synchro.

262
00:16:42,890 --> 00:16:48,040
Rien automatiquement fait que la représentation JavaScript

263
00:16:48,040 --> 00:16:51,590
ou la liste des choses à faire sont poussés vers HTML.

264
00:16:51,590 --> 00:16:54,000
Rien appliquée que, sauf pour moi.

265
00:16:54,000 --> 00:16:56,880
Je devais écrire le tirage au sort à faire fonction de liste.

266
00:16:56,880 --> 00:17:01,650
Et qui ne peut être, je veux dire, il est raisonnable de le faire,

267
00:17:01,650 --> 00:17:03,670
mais il peut être fastidieux parfois.

268
00:17:03,670 --> 00:17:08,190
Si vous avez un projet plus vaste, qui pourrait être difficile.

269
00:17:08,190 --> 00:17:10,720
>> Cadres, l'un des buts des cadres

270
00:17:10,720 --> 00:17:14,060
est de simplifier ce processus et sorte de facteur sur

271
00:17:14,060 --> 00:17:16,950
ces commun-je suppose que vous pourriez dire des modèles de conception

272
00:17:16,950 --> 00:17:20,700
que les gens ont généralement une sorte de mode de représentation des données,

273
00:17:20,700 --> 00:17:25,599
si c'est une liste d'amis, si ce n'est des informations cartographiques

274
00:17:25,599 --> 00:17:27,280
ou quelque chose ou une liste de choses à faire.

275
00:17:27,280 --> 00:17:30,660
Certaines personnes ont généralement un mode de représentation de l'information,

276
00:17:30,660 --> 00:17:33,650
et ils ont généralement besoin de garder cette information en quelque sorte dans la synchro

277
00:17:33,650 --> 00:17:36,520
entre ce que l'utilisateur voit dans une sorte de point de vue,

278
00:17:36,520 --> 00:17:39,850
parler en termes de comme le modèle vue contrôleur que vous avez vu en cours,

279
00:17:39,850 --> 00:17:45,400
et puis le modèle, qui dans ce cas est ce tableau JavaScript.

280
00:17:45,400 --> 00:17:49,020
Cadres nous donnent un moyen de résoudre ce problème.

281
00:17:49,020 --> 00:17:53,080
Maintenant, nous allons jeter un oeil à la mise en œuvre de cette liste de choses à faire

282
00:17:53,080 --> 00:18:02,360
dans un cadre appelé angularjs.

283
00:18:02,360 --> 00:18:04,650
Ça y est. Notez qu'il tienne sur une diapositive.

284
00:18:04,650 --> 00:18:07,330
Je n'ai pas à défiler vers la gauche ou la droite.

285
00:18:07,330 --> 00:18:10,460
Ce n'est probablement pas une bonne raison de recommander l'utilisation d'un cadre,

286
00:18:10,460 --> 00:18:20,120
mais remarquez que je suis toujours accéder aux éléments HTML individuels ici?

287
00:18:20,120 --> 00:18:22,400
Vais-je jamais dans le DOM?

288
00:18:22,400 --> 00:18:26,120
Voyez-vous une document.getElementById ou quelque chose comme ça?

289
00:18:26,120 --> 00:18:29,870
Non, c'est parti.

290
00:18:29,870 --> 00:18:35,590
>> Angular nous aide à garder les DOM et JavaScript notre représentation de quelque chose

291
00:18:35,590 --> 00:18:40,430
genre de la synchronisation, si ce n'est pas dans le fichier js,

292
00:18:40,430 --> 00:18:46,790
s'il n'y a pas moyen d'obtenir par programmation à tous que le contenu HTML

293
00:18:46,790 --> 00:18:51,800
du JavaScript comment nous gardons cela en synchronisation?

294
00:18:51,800 --> 00:18:58,160
Si ce n'est pas dans le fichier js., Il faut que ce soit en HTML, non?

295
00:18:58,160 --> 00:19:01,910
C'est la nouvelle version du fichier HTML,

296
00:19:01,910 --> 00:19:04,660
Et remarquez, nous avons ajouté beaucoup de choses ici.

297
00:19:04,660 --> 00:19:11,110
Remarquez, il ya ces nouveaux attributs qui disent ng-clic et ng-répétition.

298
00:19:11,110 --> 00:19:15,650
L'approche angulaire pour résoudre ce problème des difficultés dans la conception

299
00:19:15,650 --> 00:19:19,130
est de faire essentiellement HTML beaucoup plus puissant.

300
00:19:19,130 --> 00:19:24,420
Angulaire est une façon de vous permettre de faire un peu plus expressive HTML.

301
00:19:24,420 --> 00:19:30,520
Par exemple, je peux dire que je vais attacher ou lier cette zone de texte

302
00:19:30,520 --> 00:19:35,080
à une variable dans mon code JavaScript angulaire.

303
00:19:35,080 --> 00:19:37,030
Cette ng-modèle est là pour ça.

304
00:19:37,030 --> 00:19:41,550
Qui dit en gros que l'intérieur de cette zone de texte de l'élément,

305
00:19:41,550 --> 00:19:45,000
juste associer cela avec le new_todo_description variables

306
00:19:45,000 --> 00:19:47,870
dans le code JavaScript.

307
00:19:47,870 --> 00:19:51,600
C'est très puissant parce que je n'ai pas à aller explicitement à

308
00:19:51,600 --> 00:19:53,310
le DOM pour obtenir cette information.

309
00:19:53,310 --> 00:19:56,250
Je n'ai pas à dire document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Je n'ai pas à utiliser jQueries comme l'accès DOM.

311
00:19:58,750 --> 00:20:03,280
Je peux l'associer à une variable, puis quand je change cette variable

312
00:20:03,280 --> 00:20:07,400
au sein de JavaScript, il a gardé en synchronisation avec le code HTML,

313
00:20:07,400 --> 00:20:11,640
de sorte que simplifie le processus d'avoir à aller et venir entre les deux.

314
00:20:11,640 --> 00:20:18,260
Est-ce logique?

315
00:20:18,260 --> 00:20:22,060
>> Et remarquez qu'il n'ya pas de code d'accès HTML.

316
00:20:22,060 --> 00:20:27,760
Nous venons de faire HTML plus puissant,

317
00:20:27,760 --> 00:20:32,070
et maintenant, par exemple, nous pouvons faire des choses comme ça,

318
00:20:32,070 --> 00:20:38,610
comme lorsque vous cliquez dessus, appeler cette fonction dans le cadre de todos.js,

319
00:20:38,610 --> 00:20:43,410
et nous pourrions le faire avant, mais il ya d'autres choses, comme cette ng-modèle,

320
00:20:43,410 --> 00:20:47,020
et remarquez cette ng-répétition.

321
00:20:47,020 --> 00:20:51,520
Que pensez-vous cela ne?

322
00:20:51,520 --> 00:20:54,390
Voici notre liste non ordonnée d'avant.

323
00:20:54,390 --> 00:20:56,470
Nous avons les balises ul,

324
00:20:56,470 --> 00:21:03,710
Mais suis-je jamais rendu qui liste l'intérieur du code JavaScript?

325
00:21:03,710 --> 00:21:09,280
Je ne suis pas toujours rendu explicitement cette liste.

326
00:21:09,280 --> 00:21:11,580
Comment cela fonctionne?

327
00:21:11,580 --> 00:21:16,410
Eh bien, la façon angulaire accomplit c'est ce qu'on appelle un répéteur.

328
00:21:16,410 --> 00:21:22,760
En gros, cela dit que je veux imprimer cette HTML

329
00:21:22,760 --> 00:21:26,240
pour chaque intérieur todo de mon tableau de todos.

330
00:21:26,240 --> 00:21:31,850
A l'intérieur de todos.jr il ya un éventail de todos ici,

331
00:21:31,850 --> 00:21:37,910
et cela nous le dira go angulaire à travers ce tableau, et pour chaque élément vous voir

332
00:21:37,910 --> 00:21:41,390
Je veux que vous imprimez cette HTML.

333
00:21:41,390 --> 00:21:44,620
C'est un peu impressionnant parce que je peux juste faire

334
00:21:44,620 --> 00:21:47,760
sans avoir à écrire une boucle for,

335
00:21:47,760 --> 00:21:52,250
qui pour une liste de choses à faire qui n'était que de 30 lignes de code

336
00:21:52,250 --> 00:21:54,700
peut-être pas la chose la plus bénéfique,

337
00:21:54,700 --> 00:22:01,240
mais si vous avez un grand projet, cela pourrait être très pratique.

338
00:22:01,240 --> 00:22:06,100
>> C'est une solution à ce problème, ce qui rend HTML plus puissant,

339
00:22:06,100 --> 00:22:10,820
et qui nous permet de garder JavaScript et HTML dans la synchro.

340
00:22:10,820 --> 00:22:13,220
Il ya d'autres façons possibles de résoudre ce problème,

341
00:22:13,220 --> 00:22:15,320
et non chaque cadre fait cela.

342
00:22:15,320 --> 00:22:17,720
Non chaque cadre fonctionne le long de ces lignes.

343
00:22:17,720 --> 00:22:19,490
Certains cadres ont des approches différentes,

344
00:22:19,490 --> 00:22:23,310
et vous pouvez constater que vous aimez codage dans un cadre sur l'autre.

345
00:22:23,310 --> 00:22:26,160
Regardons un de plus.

346
00:22:26,160 --> 00:22:30,060
Il s'agit de la liste des choses à faire codé dans un cadre appelé Backbone.

347
00:22:30,060 --> 00:22:33,250
Je vais passer par ce rapidement.

348
00:22:33,250 --> 00:22:38,300
Je vais commencer par le HTML avant de nous y allons.

349
00:22:38,300 --> 00:22:40,290
Une seconde.

350
00:22:40,290 --> 00:22:43,950
En commençant par le HTML, comme vous le remarquez, notre HTML est très similaire

351
00:22:43,950 --> 00:22:50,000
à ce qu'elle était avant, donc pas trop de nouveau sur ce front.

352
00:22:50,000 --> 00:22:55,410
Mais notre fichier js est un peu différent.

353
00:22:55,410 --> 00:23:00,360
Backbone genre de a cette idée, ou repose sur l'idée

354
00:23:00,360 --> 00:23:04,750
que beaucoup de ce que nous faisons avec, par exemple, nos projets JavaScript

355
00:23:04,750 --> 00:23:09,110
est de penser à des modèles et des collections de ces modèles.

356
00:23:09,110 --> 00:23:12,510
Ce pourrait être, par exemple, une photo et des collections de photos,

357
00:23:12,510 --> 00:23:16,230
ou l'idée d'un ami et collections d'amis.

358
00:23:16,230 --> 00:23:20,700
Et souvent quand nous programmons applications JavaScript

359
00:23:20,700 --> 00:23:25,340
nous sorte de représenter l'idée d'avoir une collection d'amis

360
00:23:25,340 --> 00:23:29,500
en quelque sorte en JavaScript, et Backbone nous donne cette couche

361
00:23:29,500 --> 00:23:33,040
au-dessus des tableaux et des objets existants de JavaScript

362
00:23:33,040 --> 00:23:38,300
de faire des choses plus puissants avec qui plus facilement.

363
00:23:38,300 --> 00:23:41,870
>> Ici, j'ai défini un modèle de choses à faire,

364
00:23:41,870 --> 00:23:44,630
et vous n'avez pas à trop se soucier de la syntaxe,

365
00:23:44,630 --> 00:23:48,730
mais il faut noter que ce qui est l'une des propriétés de cette situation?

366
00:23:48,730 --> 00:23:53,190
Il dispose d'un domaine par défaut.

367
00:23:53,190 --> 00:23:56,640
Backbone me permet de spécifier déjà au large de la chauve-souris

368
00:23:56,640 --> 00:24:00,190
toute nouvelle à faire que je crée va avoir ces valeurs par défaut.

369
00:24:00,190 --> 00:24:04,100
Maintenant, je peux personnaliser cela, mais être capable de spécifier les paramètres par défaut

370
00:24:04,100 --> 00:24:07,220
est agréable, et c'est le genre de pratique parce que ce n'est pas quelque chose qui est comme

371
00:24:07,220 --> 00:24:10,430
inhérente à JavaScript, et maintenant je n'ai pas à explicitement

372
00:24:10,430 --> 00:24:12,430
disent que les todos sont incomplètes.

373
00:24:12,430 --> 00:24:19,190
Je peux vous dire dès le départ que todos vont être marqué comme incomplet.

374
00:24:19,190 --> 00:24:21,300
Remarquez alors c'est quoi?

375
00:24:21,300 --> 00:24:25,520
Maintenant, j'ai une liste de choses à faire, et c'est une collection.

376
00:24:25,520 --> 00:24:30,960
Remarquez le champ associé à ce modèle dit todo.

377
00:24:30,960 --> 00:24:33,390
C'est ma façon de dire que Backbone

378
00:24:33,390 --> 00:24:37,350
Je vais penser à une collection de ces todos individuels.

379
00:24:37,350 --> 00:24:42,140
Il s'agit essentiellement de la structure du modèle pour mon programme.

380
00:24:42,140 --> 00:24:44,980
Ici, j'ai cette idée d'une collection,

381
00:24:44,980 --> 00:24:48,960
et essentiellement les articles contenus dans cette collection vont tous être ces todos,

382
00:24:48,960 --> 00:24:51,910
et c'est bien naturel en ce sens

383
00:24:51,910 --> 00:24:59,890
parce que je fais avoir todos, et je les ai dans une collection.

384
00:24:59,890 --> 00:25:02,940
>> Regardons d'un peu plus de cela.

385
00:25:02,940 --> 00:25:05,900
Voici une vue de Backbone.

386
00:25:05,900 --> 00:25:08,890
L'autre chose qui Backbone dit, c'est que

387
00:25:08,890 --> 00:25:14,660
un grand nombre de modèles que vous pensez ou même des collections

388
00:25:14,660 --> 00:25:19,150
vont avoir besoin d'avoir une certaine façon d'être affiché.

389
00:25:19,150 --> 00:25:21,900
Nous devons rendre cette liste de choses à faire,

390
00:25:21,900 --> 00:25:25,460
et ça ne serait pas bien si nous pouvions fournir pour chaque modèle

391
00:25:25,460 --> 00:25:28,390
ou associer à chaque modèle ce point de vue

392
00:25:28,390 --> 00:25:34,020
qui nous permet d'J'imagine relier les deux ensemble?

393
00:25:34,020 --> 00:25:38,320
Alors qu'auparavant, nous devions utiliser une boucle for qui irait à travers

394
00:25:38,320 --> 00:25:41,130
chaque todo dans notre liste et puis imprimez-le ici

395
00:25:41,130 --> 00:25:44,650
nous pouvons fondamentalement connecter avec ce modèle.

396
00:25:44,650 --> 00:25:47,550
C'est une vue des choses à faire.

397
00:25:47,550 --> 00:25:50,550
Ceci est associé à la todo nous avons trouvé plus tôt.

398
00:25:50,550 --> 00:25:54,940
Maintenant, chaque todo est affichable ou renderable

399
00:25:54,940 --> 00:25:56,960
par cette vue des choses à faire.

400
00:25:56,960 --> 00:25:59,440
Remarquez certains champs.

401
00:25:59,440 --> 00:26:05,880
Que pensez-vous de cette tagName est, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Rappelez-vous de devant quand nous avons voulu rendre un todo

403
00:26:09,790 --> 00:26:16,700
nous aurions à associer explicitement nos todos avec cette balise li.

404
00:26:16,700 --> 00:26:21,080
Maintenant, nous disons que là où cette todo va vivre

405
00:26:21,080 --> 00:26:25,250
va être à l'intérieur d'une balise li.

406
00:26:25,250 --> 00:26:31,440
Et maintenant, nous sommes également associer des événements avec nos todos.

407
00:26:31,440 --> 00:26:34,320
>> Chaque todo a ce seul événement.

408
00:26:34,320 --> 00:26:38,480
Si vous cliquez sur à peu près le bouton à bascule, c'est ce que je dis là,

409
00:26:38,480 --> 00:26:43,080
alors essentiellement marquer le todo comme le contraire de ce qu'elle était avant

410
00:26:43,080 --> 00:26:45,890
et puis re-rendre l'application.

411
00:26:45,890 --> 00:26:47,810
C'est un peu similaire au code avant.

412
00:26:47,810 --> 00:26:50,730
Rappelez-vous quand nous avons marqué comme soit le contraire ou-

413
00:26:50,730 --> 00:26:52,410
et puis nous avons re-rendue.

414
00:26:52,410 --> 00:26:57,750
Mais remarquez maintenant cet événement sert à quelque chose qui était dans le code HTML.

415
00:26:57,750 --> 00:26:59,640
Il était assis là.

416
00:26:59,640 --> 00:27:01,410
Le bouton a eu un clic sur.

417
00:27:01,410 --> 00:27:05,310
Lorsque vous cliquez sur le bouton, il genre de fait les choses à

418
00:27:05,310 --> 00:27:07,210
mis en place que todo est incomplet.

419
00:27:07,210 --> 00:27:11,180
Ici, nous avons associé ce cas de cliquer sur ce bouton à bascule

420
00:27:11,180 --> 00:27:15,830
et l'inversion que ce soit sur ou hors de ce point de vue.

421
00:27:15,830 --> 00:27:20,480
>> C'est une belle façon de mettre en place cet événement de sorte qu'il est très étroitement lié

422
00:27:20,480 --> 00:27:26,980
ce point de vue, et ainsi de remarquer ce un de plus.

423
00:27:26,980 --> 00:27:31,050
J'ai cette méthode de rendu, et nous n'avons pas à entrer dans les détails.

424
00:27:31,050 --> 00:27:33,650
C'est un peu similaire à ce que nous avions avant,

425
00:27:33,650 --> 00:27:36,070
mais notez que je ne suis pas une boucle à travers n'importe quoi.

426
00:27:36,070 --> 00:27:40,700
Je ne suis pas l'impression que balise ul c'est une sorte de dire que je vais imprimer tous les éléments.

427
00:27:40,700 --> 00:27:46,610
Je fournis les fonctionnalités pour rendre celui-chose à faire.

428
00:27:46,610 --> 00:27:49,400
Il s'agit d'un concept très puissant parce que fondamentalement

429
00:27:49,400 --> 00:27:53,600
notre to-do list se compose de tous ces todos, et si l'on peut en principe préciser

430
00:27:53,600 --> 00:27:56,890
le moyen de rendre l'un de ceux todos

431
00:27:56,890 --> 00:28:04,230
alors nous pouvons avoir notre puissant backbone en soi rendre tous les todos

432
00:28:04,230 --> 00:28:07,760
en appelant la méthode de rendu sur les todos individuels.

433
00:28:07,760 --> 00:28:14,180
C'est un concept qui est utile ici.

434
00:28:14,180 --> 00:28:18,160
Maintenant, une bonne question à poser est de savoir comment est cette application étant mis ensemble?

435
00:28:18,160 --> 00:28:21,200
Parce que nous avons la possibilité de rendre une todo,

436
00:28:21,200 --> 00:28:23,860
mais comment pouvons-nous l'idée de multiples todos?

437
00:28:23,860 --> 00:28:25,100
>> Prenons un coup d'oeil.

438
00:28:25,100 --> 00:28:27,100
Il s'agit de la dernière partie.

439
00:28:27,100 --> 00:28:29,740
Notez que nous avons une vue de liste de choses à faire ici,

440
00:28:29,740 --> 00:28:34,440
et remarquez que c'est aussi un point de vue.

441
00:28:34,440 --> 00:28:36,970
Et pour aller sur un certain nombre de choses,

442
00:28:36,970 --> 00:28:45,280
cette méthode initialize sera appelée quand nous créons d'abord cette liste de choses à faire.

443
00:28:45,280 --> 00:28:52,630
Comme vous pouvez le voir, c'est comme la création de la liste de choses à faire et l'associer à ce point de vue.

444
00:28:52,630 --> 00:28:57,860
Et puis j'ai ajouté les fonctions ici, donc essentiellement lorsque vous ajoutez un élément-

445
00:28:57,860 --> 00:29:01,440
ce qui est similaire à la méthode addItem nous avons vu avant-

446
00:29:01,440 --> 00:29:07,430
Je vais créer un nouvel objet todo, et remarquez que je suis en train d'appeler

447
00:29:07,430 --> 00:29:13,080
cette nouvelle méthode todo, si cela est prévu par Backbone,

448
00:29:13,080 --> 00:29:16,010
et je peux passer mes propriétés ici.

449
00:29:16,010 --> 00:29:23,710
Et maintenant, chaque todo que je crée avec cette obtiendra cette fonctionnalité que nous avons vu auparavant.

450
00:29:23,710 --> 00:29:28,140
Remarquez que je suis compensation sur la zone de texte avant un petit peu du détail

451
00:29:28,140 --> 00:29:32,900
et puis je vais ajouter cette collection.

452
00:29:32,900 --> 00:29:37,630
>> Cela semble presque bizarre car avant nous avons juste eu à le faire todos.push,

453
00:29:37,630 --> 00:29:43,310
et puis nous avons fait, et cela peut sembler plus compliqué pour ce projet particulier,

454
00:29:43,310 --> 00:29:46,980
et vous pouvez constater que Backbone voire angulaire ou tout autre cadre

455
00:29:46,980 --> 00:29:50,790
ne convient pas à votre projet particulier, mais je pense qu'il est important de penser à

456
00:29:50,790 --> 00:29:54,100
ce que cela signifie sur une plus grande échelle pour les grands projets,

457
00:29:54,100 --> 00:29:56,610
parce que si nous avions un projet plus vaste où nous représentions

458
00:29:56,610 --> 00:30:00,860
certains collection très complexe, quelque chose de plus profond que juste une liste de choses à faire,

459
00:30:00,860 --> 00:30:04,490
disons une liste d'amis ou quelque chose comme ça, cela pourrait être utile

460
00:30:04,490 --> 00:30:09,620
parce que nous pourrions organiser notre code d'une manière très pratique,

461
00:30:09,620 --> 00:30:12,550
d'une manière qui rendrait plus facile pour quelqu'un d'autre

462
00:30:12,550 --> 00:30:16,820
qui a voulu ramasser un projet visant à construire.

463
00:30:16,820 --> 00:30:21,450
Vous pouvez voir que cela donne beaucoup de la structure.

464
00:30:21,450 --> 00:30:26,580
Et puis je vais appeler rendre sur cette addItem.

465
00:30:26,580 --> 00:30:31,050
Render, comme vous pouvez le voir, et vous n'avez pas à saisir cette syntaxe complète,

466
00:30:31,050 --> 00:30:37,790
mais, fondamentalement, pour chaque modèle, il va appeler la méthode de rendu individuel.

467
00:30:37,790 --> 00:30:41,500
C'est en quelque sorte où cela vient.

468
00:30:41,500 --> 00:30:44,140
Précisons simplement comment rendre les todos individuels,

469
00:30:44,140 --> 00:30:47,310
et puis nous allons les coller ensemble comme un tout.

470
00:30:47,310 --> 00:30:49,810
Mais cela fournit un moyen de l'abstraction,

471
00:30:49,810 --> 00:30:55,470
parce que je pouvais changer ma façon de décider de rendre la todos individuels,

472
00:30:55,470 --> 00:30:57,940
et je ne voudrais pas avoir à changer tout de ce code.

473
00:30:57,940 --> 00:31:00,700
C'est plutôt cool.

474
00:31:00,700 --> 00:31:08,540
>> Quelqu'un at-il des questions au sujet des frameworks JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Inaudible question des étudiants]

476
00:31:14,310 --> 00:31:16,050
Oh, bien sûr, c'est une excellente question.

477
00:31:16,050 --> 00:31:19,080
La question était de savoir comment ai-je inclure les cadres?

478
00:31:19,080 --> 00:31:22,970
La plupart des frameworks JavaScript sont fondamentalement juste js

479
00:31:22,970 --> 00:31:25,740
que vous pouvez inclure dans le haut de votre code.

480
00:31:25,740 --> 00:31:29,830
Notez que dans la partie de tête de ma HTML j'ai toutes ces balises de script,

481
00:31:29,830 --> 00:31:34,250
et l'étiquette finale du script est le code que nous avons écrit.

482
00:31:34,250 --> 00:31:38,820
Et puis, les codes de cadre 3 sont juste également des balises script.

483
00:31:38,820 --> 00:31:42,110
Je les y compris de ce qu'on appelle un CDN,

484
00:31:42,110 --> 00:31:46,200
ce qui me permet de l'obtenir de quelqu'un d'autre à ce stade

485
00:31:46,200 --> 00:31:57,930
mais chaque cadre a cette-vous pouvez très bien trouver le contenu

486
00:31:57,930 --> 00:32:03,540
pour une bibliothèque JavaScript notamment disponible sur certains CDN ou quelque chose comme ça,

487
00:32:03,540 --> 00:32:05,570
et puis vous pouvez inclure ces balises script.

488
00:32:05,570 --> 00:32:07,600
Est-ce logique?

489
00:32:07,600 --> 00:32:09,500
Cool.

490
00:32:09,500 --> 00:32:11,730
>> Ce sont 2 approches différentes.

491
00:32:11,730 --> 00:32:14,640
Ce ne sont pas les seuls moyens de résoudre ce problème.

492
00:32:14,640 --> 00:32:17,080
Il ya beaucoup de choses différentes qui

493
00:32:17,080 --> 00:32:19,490
quelqu'un pourrait le faire, et il ya de nombreux cadres là-bas.

494
00:32:19,490 --> 00:32:23,300
Angulaires et Backbone ne disent pas toute l'histoire.

495
00:32:23,300 --> 00:32:26,370
Bonne chance dans vos projets de fin, et je vous remercie beaucoup.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]