1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [JavaScript Frameworks:? Warum und Wie]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvard University]

3
00:00:04,000 --> 00:00:06,960
[Dies ist CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hallo, alle. Willkommen auf der JavaScript Frameworks Seminar.

5
00:00:10,630 --> 00:00:14,910
Mein Name ist Kevin, und heute habe ich werde über JavaScript-Frameworks werden reden,

6
00:00:14,910 --> 00:00:20,400
und das Ziel der dieses Seminars ist es nicht auf Sie bekommen, um, sagen wir, meistern eine bestimmte Rahmen per se

7
00:00:20,400 --> 00:00:23,810
aber, um Ihnen eine breite Einführung, um ein paar von Frameworks

8
00:00:23,810 --> 00:00:27,150
und zeigen, warum wir würden jemals wollen, um einen Rahmen zu verwenden.

9
00:00:27,150 --> 00:00:31,060
>> Bevor ich, dass zu tun, werde ich bereitzustellen ein wenig Hintergrund-in JavaScript,

10
00:00:31,060 --> 00:00:33,750
und dann werden wir es von dort zu nehmen.

11
00:00:33,750 --> 00:00:36,270
Wir gehst, um durch die Implementierung eines, um-do Liste zu starten.

12
00:00:36,270 --> 00:00:39,330
Hier ist unsere Task-Liste für heute.

13
00:00:39,330 --> 00:00:41,990
Es ist Art von lustig. Wir haben, um eine to-do-Liste in JavaScript zu implementieren.

14
00:00:41,990 --> 00:00:45,110
Dies ist, was es geht um aussehen wird, so dass das, unser erstes Ziel.

15
00:00:45,110 --> 00:00:47,160
Wir wirst doch nicht um einen Rahmen zu verwenden, um, dass zu tun.

16
00:00:47,160 --> 00:00:51,930
Wir sind, um Code JavaScript gehen und bekommen Sie ein to-do-Liste um zu arbeiten.

17
00:00:51,930 --> 00:00:54,370
Dann haben wir gehst, um das Design ohne Verwendung von einen Rahmen zu verbessern.

18
00:00:54,370 --> 00:00:57,190
Wir gehst, um verschiedenen Dinge, die wir mit nur JavaScript allein zu tun diskutieren können

19
00:00:57,190 --> 00:01:00,650
, um unsere machen, um-do aufzulisten, ein wenig mehr gut gestaltet.

20
00:01:00,650 --> 00:01:02,490
Dann haben wir gehst, um in einem gewissen jQuery zu werfen,

21
00:01:02,490 --> 00:01:05,030
und dann werden wir gehst, um an der gleichen schauen, um-do-Liste,

22
00:01:05,030 --> 00:01:07,170
just in verschiedenen Frameworks implementiert, und werden wir diskutieren,

23
00:01:07,170 --> 00:01:09,280
 die Vor-und cons entlang dem Weg.

24
00:01:09,280 --> 00:01:12,040
>> Lassen Sie uns Beginn mit der Umsetzung, dass to-do-Liste.

25
00:01:12,040 --> 00:01:14,270
Lassen Sie uns sagen wir Sie dieses HTML bist gegeben.

26
00:01:14,270 --> 00:01:16,620
Ich werde, um machen dies zu einem wenig kleiner.

27
00:01:16,620 --> 00:01:19,300
Wie Sie sehen können, haben ich ein wenig-Header, der Todo sagt

28
00:01:19,300 --> 00:01:21,740
und ein wenig box, wo ich eine Beschreibung eines todo eingeben können

29
00:01:21,740 --> 00:01:26,990
und dann ein neues Element Schaltfläche, also lasst uns versuchen, eine neue todo zu dieser Liste geben Sie.

30
00:01:26,990 --> 00:01:31,000
Gib ein JavaScript-Frameworks Seminar,

31
00:01:31,000 --> 00:01:33,090
und ich bin, um neue Artikel getroffen zu werden.

32
00:01:33,090 --> 00:01:35,730
Ich bekomme diese JavaScript Warnung, die zu implementieren mir sagt:.

33
00:01:35,730 --> 00:01:37,560
Wir haben bekam, um es zu zu implementieren.

34
00:01:37,560 --> 00:01:41,490
Lassen Sie uns prüfen out den Code für dies, sowohl die HTML und die JavaScript aktivierst.

35
00:01:41,490 --> 00:01:43,260
Hier ist unsere HTML.

36
00:01:43,260 --> 00:01:45,500
Wie Sie hier sehen können, ist hier, unsere kleine Todos-Header.

37
00:01:45,500 --> 00:01:47,620
Das war, dass bold Sache, an der Spitze,

38
00:01:47,620 --> 00:01:50,690
und dann haben wir die-Eingang box mit dem Platzhalter,

39
00:01:50,690 --> 00:01:59,460
und dann es gibt eine gewisse-Attribut des diese Schaltfläche, die diese Funktion addTodo aufruft.

40
00:01:59,460 --> 00:02:05,460
Does anybody wollen zu erraten, was, dass on click wird was bedeutet,?

41
00:02:05,460 --> 00:02:07,390
[Stud. unhörbar Reaktion]

42
00:02:07,390 --> 00:02:09,289
Gut, ist die on click sort von wie ein Ereignis,

43
00:02:09,289 --> 00:02:12,120
wie Anklicken mit der Maus ist nur ein Ereignis, und was wir tust

44
00:02:12,120 --> 00:02:16,890
wird wir binden das Ereignis der Klicken dieses-Taste, um, dass die Funktion auszuführen.

45
00:02:16,890 --> 00:02:21,700
AddTodo ist dieser Event-Handler für das Klicken, dass die-Taste.

46
00:02:21,700 --> 00:02:25,010
>> Wie Sie sehen können,, wenn ich klicken Sie auf die neues Element Schaltfläche

47
00:02:25,010 --> 00:02:29,940
die on click Ereignis wird ausgelöst,, und diese Funktion aufgerufen wird.

48
00:02:29,940 --> 00:02:33,170
Lassen Sie uns bei Funktion aussehen.

49
00:02:33,170 --> 00:02:36,260
Wie Sie sehen können, dann ist Sie hier, meine JavaScript-Code so weit.

50
00:02:36,260 --> 00:02:41,280
Was ich habe, an der Spitze ist a globale Datenstruktur für meine to-do-Liste.

51
00:02:41,280 --> 00:02:44,060
Es sieht aus wie einem Array. Es ist nur eine leeres Array zurück.

52
00:02:44,060 --> 00:02:47,100
Und dann habe ich haben die addTodo Funktion, dass wir früher sah,

53
00:02:47,100 --> 00:02:50,740
und die einzige Zeile des Codes in gibt es diese alert.

54
00:02:50,740 --> 00:02:55,730
Es alarmiert zu implementieren mir, und dann Ich habe 2 Aufgaben bei der Hand.

55
00:02:55,730 --> 00:02:58,790
I haben, um die todo zu diesem globale Datenstruktur hinzufügen möchten,

56
00:02:58,790 --> 00:03:01,860
und dann habe ich zeichnen möchten out die, um-do Liste.

57
00:03:01,860 --> 00:03:06,360
Nichts allzu Besonderes, einfach nur noch nicht, aber JavaScript Sie möglicherweise in der nicht vertraut mit,

58
00:03:06,360 --> 00:03:12,370
so Ich werde, langsam zu gehen und überprüfen Sie die Grundlagen der JavaScript in diese Weise.

59
00:03:12,370 --> 00:03:15,490
>> Lassen Sie uns geben dies ein Schuss.

60
00:03:15,490 --> 00:03:21,130
Lassen Sie uns sagen der Benutzer eingibt etwas in dieser Box auf.

61
00:03:21,130 --> 00:03:23,360
I nur etwas, was in Sie hier,, text typisiert.

62
00:03:23,360 --> 00:03:27,620
Wie kann ich des Zugangs, dass der Text durch JavaScript sortieren?

63
00:03:27,620 --> 00:03:32,500
Denken Sie daran,, dass die JavaScript, ist einer der seiner fundamentalen Funktionen, die es gibt uns

64
00:03:32,500 --> 00:03:34,670
dies programmgesteuerten Zugriff auf das DOM.

65
00:03:34,670 --> 00:03:40,670
Es ermöglicht uns, Elemente und ihre Eigenschaften von diesem tatsächlichen HTML zuzugreifen.

66
00:03:40,670 --> 00:03:43,430
Die Art und Weise wir tun,, dass mit bloßen Knochen JavaScript

67
00:03:43,430 --> 00:03:51,360
ist, wir können tatsächlich nutzen eine Funktion in JavaScript genannt getElementById.

68
00:03:51,360 --> 00:03:55,140
Ich möchte, um den Text, die dort sucht in einem gewissen variable typisiert speichern, zu

69
00:03:55,140 --> 00:03:58,350
so Ich werde, um eine neue Variable namens new_todo sagen,,

70
00:03:58,350 --> 00:04:01,980
und ich werde, dieses Element zu zu bekommen.

71
00:04:01,980 --> 00:04:06,330
Dies ist eine Funktion,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Und jetzt bin ich immer ein Element durch ID, so dass ich, benötigen Sie die ID von diesem Text box,

73
00:04:11,580 --> 00:04:15,860
so Ich habe gegeben es die ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Das ist, wie Ich werde, um ein Element zu bekommen.

75
00:04:18,399 --> 00:04:23,880
Das ist mein Argument an diese Funktion, um anzugeben, welche ID zu bekommen.

76
00:04:23,880 --> 00:04:28,110
Und so dass das, ein Element in HTML, und es verfügt über Eigenschaften,.

77
00:04:28,110 --> 00:04:30,650
Du hast diese gesehen. Sie sind Attribute.

78
00:04:30,650 --> 00:04:37,090
Das Attribut des Textes Element, das die Eingabe des Benutzers speichert, wird genannt Wert.

79
00:04:37,090 --> 00:04:40,860
Ich gerettet den Wert dieser Text box jetzt in diesem Variable namens new_todo.

80
00:04:40,860 --> 00:04:45,040
Now I den programmgesteuerten Zugriff auf diesem variable haben, ist welche Art von kühlen

81
00:04:45,040 --> 00:04:49,200
, weil jetzt, was ich tun können, ist Ich kann es zu meinem to-do-Liste hinzuzufügen.

82
00:04:49,200 --> 00:04:52,870
>> Die Art und Weise wir dies in tun würde, JavaScript-and mach dir keine Sorgen wenn Sie nicht vertraut mit dies bist,

83
00:04:52,870 --> 00:04:57,010
aber gerade gehen durch es ist todos.push

84
00:04:57,010 --> 00:05:00,130
, weil, die der Name meiner globale Datenstruktur ist in der up Sie hier,,

85
00:05:00,130 --> 00:05:04,450
und ich bin gehen, um new_todo zu schieben.

86
00:05:04,450 --> 00:05:09,120
Dies ist groß, weil jetzt habe ich es zu meinem JavaScript hinzugefügt haben

87
00:05:09,120 --> 00:05:11,280
Darstellung von, dass to-do-Liste.

88
00:05:11,280 --> 00:05:15,170
Aber jetzt wie bekomme ich es zurück zu dem HTML?

89
00:05:15,170 --> 00:05:18,560
I haben, einen Weg zu von schieben Sie es zurück zu sortieren zu finden.

90
00:05:18,560 --> 00:05:21,830
In anderen Worten, I Art von haben, dies zu zu zeichnen.

91
00:05:21,830 --> 00:05:26,060
Was wir gehst, um zu tun ist, dass wir gehst, um die to-do-Liste zu zeichnen.

92
00:05:26,060 --> 00:05:29,270
Ich brauche zu anderen HTML-auf diesem Seite zu aktualisieren,

93
00:05:29,270 --> 00:05:32,040
und wie Sie sehen können, habe ich dieses kleine Behälter Sie hier links ab,

94
00:05:32,040 --> 00:05:36,840
dieser Teiler des Seite, deren ID ist todos,

95
00:05:36,840 --> 00:05:40,870
und ich werde, um die to-do-Liste dort zu setzen.

96
00:05:40,870 --> 00:05:47,240
Zuerst werde ich um es zu deaktivieren out, weil, sagen wir, dort war ein alter to-do-Liste dort.

97
00:05:47,240 --> 00:05:49,560
I bin bekommen, dass Element durch ID wieder,

98
00:05:49,560 --> 00:05:54,530
und ich bin den Zugriff auf das innere HTML-von diesem Element,

99
00:05:54,530 --> 00:05:58,010
und ich bin gehen, um, dass zu löschen.

100
00:05:58,010 --> 00:06:05,510
Wenn wir diesen Code verließ, wie ist, würden wir sehen einen leeren dort nichts,

101
00:06:05,510 --> 00:06:10,410
und jetzt will ich zu starten Rendern meine neue to-do-Liste.

102
00:06:10,410 --> 00:06:12,870
I bin im Grunde gehen, um wischen Sie out my to-do-Liste.

103
00:06:12,870 --> 00:06:18,180
>> Nun ist die innere HTML-Innenseite des diesem todos div ist völlig klar,

104
00:06:18,180 --> 00:06:20,060
und jetzt habe ich brauchen, um zu starten Zugabe von meiner Liste.

105
00:06:20,060 --> 00:06:23,890
Der erste Sache, die ich wollen, um wieder hinzuzufügen, ist die ungeordnete Liste tag,

106
00:06:23,890 --> 00:06:33,890
was im Grunde bezeichnet dass dies der Beginn von einer ungeordnete Liste ist.

107
00:06:33,890 --> 00:06:39,770
Now für jedes Element in meine todos Array Ich möchte um es zu drucken out Innenseite des diesem HTML.

108
00:06:39,770 --> 00:06:43,710
I wollen, um es anhängen on an der Unterseite des dieser Liste.

109
00:06:43,710 --> 00:06:49,040
Genau wie in C, kann ich eine for-Schleife zu verwenden, und ich bin gehen, um am Anfang des meiner Liste zu starten

110
00:06:49,040 --> 00:06:54,140
bei Element 0, und ich bin gehen, um alle die Art und Weise auf die Länge des der Liste zu gehen.

111
00:06:54,140 --> 00:07:01,100
Wir können tatsächlich bekommen die Länge des einem Array in JavaScript unter Verwendung des length-Eigenschaft.

112
00:07:01,100 --> 00:07:03,420
Grundsätzlich bin ich gehen, um etwas sehr ähnlich Innenseite des hier zu tun

113
00:07:03,420 --> 00:07:05,600
zu druckenden hin, dass die Element.

114
00:07:05,600 --> 00:07:12,970
Ich kann wieder Zugriff auf die todos div, die innere HTML-Eigenschaft des, dass,

115
00:07:12,970 --> 00:07:17,560
und ich bin gehen, um on dieser neuen Liste Element Anlagen hinzufügen, und, dass ist los, um durch umgeben sein

116
00:07:17,560 --> 00:07:25,390
dies li tag, und ich werde, um mit dem +-Operator verketten,

117
00:07:25,390 --> 00:07:28,040
und das ist die i-te Element von meine todos Array,

118
00:07:28,040 --> 00:07:32,380
und dann habe ich bin gehen, um, dass die tag zu schließen.

119
00:07:32,380 --> 00:07:36,240
Now für jeden Element, das wir werde hinzufügen, eine neue Liste Eintrag.

120
00:07:36,240 --> 00:07:48,700
Und dann alles, was wir wirklich brauchen, um tun ist, zu schließen off, dass die tag.

121
00:07:48,700 --> 00:07:52,820
Ich brauche nur, um zu schließen off, dass ungeordnete Liste tag.

122
00:07:52,820 --> 00:07:55,490
>> Kennen Sie bekommen ein Gefühl für how, dass funktioniert es?

123
00:07:55,490 --> 00:07:57,700
Dies öffnet die gesamte Liste.

124
00:07:57,700 --> 00:08:01,080
Dies fügt einzelnen Elemente aus dem todos Liste, um der Liste aus,

125
00:08:01,080 --> 00:08:05,470
und dann, die geschlossen wird die gesamte Liste, und dies ist mein addTodo-Funktion.

126
00:08:05,470 --> 00:08:09,590
Habe ich im Grunde durch Abrufen der todo aus dem Text box zu beginnen.

127
00:08:09,590 --> 00:08:18,950
Ich hinzufügen, dass, um der todos Array, und dann habe ich erneut rendern die to-do-Liste.

128
00:08:18,950 --> 00:08:21,520
Jetzt kann ich die Produkte aus, meiner Liste hinzuzufügen.

129
00:08:21,520 --> 00:08:24,620
Dies ist eine Art von spannend, weil in nur ein paar Zeilen von Code-

130
00:08:24,620 --> 00:08:28,240
wir habe im Grunde eine to-do-Liste, wo wir Einzelteile hinzufügen können gemacht.

131
00:08:28,240 --> 00:08:30,050
Große.

132
00:08:30,050 --> 00:08:34,480
Das ist Art von einer grundlegenden Einführung, um JavaScript aktivierst.

133
00:08:34,480 --> 00:08:36,179
Sie nicht Sorgen zu viel über der Syntax für jetzt,

134
00:08:36,179 --> 00:08:38,130
aber über dieses konzeptionell zu denken.

135
00:08:38,130 --> 00:08:40,539
Wir hatten einige HTML.

136
00:08:40,539 --> 00:08:45,310
Wir hatten eine Text box man auf der Seite, dass im Grunde erlaubt Benutzer zur Eingabe von eine to-do-Artikel zum hinzuzufügen.

137
00:08:45,310 --> 00:08:49,210
Und dann haben wir verwendet Sie JavaScript, um, dass die todo aus diesem Text box zu holen.

138
00:08:49,210 --> 00:08:52,830
Wir gespeichert, dass im Inneren eines JavaScript-Arrays, was im Grunde ist wie

139
00:08:52,830 --> 00:08:56,010
unsere programmatischer Repräsentation an von, dass to-do-Liste,

140
00:08:56,010 --> 00:08:59,060
und dann werden wir gedruckt it out.

141
00:08:59,060 --> 00:09:02,690
Dies ist todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Dies ist eine Art von cool, aber wie können wir nehmen Sie dieses weiteren?

143
00:09:07,620 --> 00:09:11,350
Nun, wie Sie sehen können, ist dies nicht wie ein kompletter to-do-Liste.

144
00:09:11,350 --> 00:09:15,100
Zum Beispiel, kann ich nicht zu markieren einem der diesen Einzelteilen als unvollständig,

145
00:09:15,100 --> 00:09:19,920
mögen, wenn I, um die Elemente reprioritize oder Löschen von Elementen wollte.

146
00:09:19,920 --> 00:09:23,150
Das ist okay, aber wir können Sie dieses weiter zu gehen.

147
00:09:23,150 --> 00:09:29,280
Ich werde nicht zu viel zu reden über das Hinzufügen von Extra-Features,

148
00:09:29,280 --> 00:09:32,800
aber wir konnten nehmen, dass eine weitere.

149
00:09:32,800 --> 00:09:35,970
Let 's talk über das Hinzufügen von eine weitere Funktion, dies zu to-do-Liste,

150
00:09:35,970 --> 00:09:40,370
, welche wird vorhaben, werden in der Lage zu eine individuelle to-do-Einzelteil zu überprüfen

151
00:09:40,370 --> 00:09:44,780
und haben es werden durchgestrichen, so im Grunde sagen, I habe dies getan.

152
00:09:44,780 --> 00:09:50,240
Lassen Sie uns an einem gewissen Code, der, dass vollbringen aussehen könnte.

153
00:09:50,240 --> 00:09:52,740
Beachten Sie, was Ich habe an der Spitze getan ist, ich habe hinzugefügt

154
00:09:52,740 --> 00:09:57,620
a neuen globalen Array namens komplette.

155
00:09:57,620 --> 00:10:02,890
I bin im Grunde unter Verwendung dies zu speichern, ob die Elemente auf dem, um-do Liste

156
00:10:02,890 --> 00:10:06,560
sind komplette oder nicht.

157
00:10:06,560 --> 00:10:08,470
Dies ist eine Möglichkeit, dies zu tun.

158
00:10:08,470 --> 00:10:13,750
Wenn Ich schaue auf die Umsetzung der dies, das Display,

159
00:10:13,750 --> 00:10:21,120
im Grunde, wenn ich eine todo und geben Sie I drücken Sie diese Toggle-Button

160
00:10:21,120 --> 00:10:25,040
es kreuzt out, so jedes Einzelteil auf dieser Liste verfügt entweder über einen komplette

161
00:10:25,040 --> 00:10:31,050
oder unvollständigen Zustand, und ich bin mit ein weiteres Array, um, dass repräsentieren.

162
00:10:31,050 --> 00:10:33,730
>> Grundsätzlich für jeden todo in diesem todos Array

163
00:10:33,730 --> 00:10:37,110
es gibt ein Element in der komplette-Array, das im Grunde zeigt an,

164
00:10:37,110 --> 00:10:39,060
, ob, dass eine vollständige ist oder nicht.

165
00:10:39,060 --> 00:10:41,640
Ich habe hatte, um ziemlich minimal Änderungen an diesem Code zu machen,

166
00:10:41,640 --> 00:10:44,470
so hier ist unsere addTodo-Funktion.

167
00:10:44,470 --> 00:10:48,530
Beachten Sie, dass Sie hier, I bin pushing es auf das Array,

168
00:10:48,530 --> 00:10:51,300
und dann habe ich bin schiebt einen 0 bis dieses vollständigen Array,

169
00:10:51,300 --> 00:10:57,090
im Grunde in parallel mit dem betreffenden neuen todo Push-to-sagen,

170
00:10:57,090 --> 00:11:00,430
I bin Zugabe von diesen Titel, und es ist mit diesem Wert gekoppelt ist,

171
00:11:00,430 --> 00:11:02,810
was bedeutet, dass es unvollständig ist in der.

172
00:11:02,810 --> 00:11:04,970
Und dann habe ich bin Neuzeichnen der, um-do Liste.

173
00:11:04,970 --> 00:11:09,220
Now, merke ich, habe dieses drawTodoList-Funktion hinzugefügt.

174
00:11:09,220 --> 00:11:11,760
Dies dauert eine Menge von der Code, den wir hatte, bevor,

175
00:11:11,760 --> 00:11:15,320
im Grunde löscht out Sie den Karton und zieht dann die neue to-do-Liste.

176
00:11:15,320 --> 00:11:19,620
Aber feststellen, dass innerhalb von dies for-Schleife wir tust ein wenig mehr jetzt.

177
00:11:19,620 --> 00:11:25,000
Wir bist im Grunde Überprüfung, ob das Einzelteil, das entsprechenden, um der i-ten todo Sie hier,

178
00:11:25,000 --> 00:11:30,220
abgeschlossen ist, und wir sind anders benehmen in diesen 2 Umstände.

179
00:11:30,220 --> 00:11:32,790
Wenn es fertig ist, wir sind das Hinzufügen dieses del tag,

180
00:11:32,790 --> 00:11:35,360
welches ist im Grunde die Art und Weise Sie, dass die Streik Through-Effekt bekommen können

181
00:11:35,360 --> 00:11:38,190
Überquerung out die to-do-Liste, wenn es fertig ist,

182
00:11:38,190 --> 00:11:42,200
und wenn es nicht ist in der, wir sind nicht einschließlich es.

183
00:11:42,200 --> 00:11:45,030
Und so, dass Art von kümmert sich um von, dass,

184
00:11:45,030 --> 00:11:49,140
>> und das ist, ein Weg, um dies zu erreichen.

185
00:11:49,140 --> 00:11:53,420
Und dann bemerken, wenn der Benutzer klickt auf eins von diesen

186
00:11:53,420 --> 00:11:56,780
wir umzuschalten die Fertigstellung Status der es.

187
00:11:56,780 --> 00:12:02,170
Wenn die Benutzer klickt, wir leiten umzukehren, ob es gewesen ist abgeschlossen oder nicht,

188
00:12:02,170 --> 00:12:04,540
und dann werden wir neu zu zeichnen es.

189
00:12:04,540 --> 00:12:06,190
Diese Art von Werken.

190
00:12:06,190 --> 00:12:09,860
Wir haben diese Funktionen, die out tragen ihre eigenen Aufgaben,

191
00:12:09,860 --> 00:12:11,730
und dies ist ganz okay.

192
00:12:11,730 --> 00:12:14,110
Gibt es alles, was wir besser tun konnte über diese, obwohl?

193
00:12:14,110 --> 00:12:18,700
Beachten Sie, haben wir diese 2 globalen-Arrays.

194
00:12:18,700 --> 00:12:23,550
Wenn dies war C, und wir hatten 2-Arrays, dass Art von vertreten

195
00:12:23,550 --> 00:12:25,800
Daten, die sort von in irgendeiner Weise verwandt war

196
00:12:25,800 --> 00:12:30,140
was würden wir in C verwenden, um diese 2 Felder kombinieren

197
00:12:30,140 --> 00:12:35,420
in etwas, das beide Stücke von Informationen kapselt?

198
00:12:35,420 --> 00:12:37,600
Anybody wollen, um einen Vorschlag machen?

199
00:12:37,600 --> 00:12:39,450
[Stud. unhörbar Reaktion]

200
00:12:39,450 --> 00:12:42,340
>> Genau, so wir nutzen könnten irgendeine Art von struct,

201
00:12:42,340 --> 00:12:44,960
und wenn Sie denken Sie zurück an, sagen wir, pset 3,

202
00:12:44,960 --> 00:12:47,350
erinnere mich, wir hatte Wörterbuch, und dann hatten wir, ob das Wort

203
00:12:47,350 --> 00:12:50,230
war in das Wörterbuch aufzunehmen, und all, dass die Informationen wurde setzen zusammen

204
00:12:50,230 --> 00:12:52,420
Innenseite des einem gewissen Datenstruktur.

205
00:12:52,420 --> 00:12:56,390
One Sache, die ich mit diesem Code tun können, um vermeiden, dass diese 2 verschiedenen Arrays

206
00:12:56,390 --> 00:13:01,760
für ähnliche Stücke von Informationen ist, kann ich ihnen in eine JavaScript-Objekt zu kombinieren.

207
00:13:01,760 --> 00:13:07,150
Lassen Sie uns werfen Sie einen Blick bei, dass.

208
00:13:07,150 --> 00:13:11,740
Beachten Sie, ich haben nur eine Array an der Spitze jetzt

209
00:13:11,740 --> 00:13:17,650
und was ich getan habe, ist-und dies ist nur die JavaScript-Syntax für sort von

210
00:13:17,650 --> 00:13:21,350
die Schaffung eines literal Version eines Objektes,

211
00:13:21,350 --> 00:13:24,670
und feststellen, es gibt 2 Eigenschaften, so wir die todo haben,

212
00:13:24,670 --> 00:13:29,660
und es ist zusammen mit, ob es ist vollständige oder unvollständige gehalten.

213
00:13:29,660 --> 00:13:31,000
Dies ist sehr ähnlich-Code.

214
00:13:31,000 --> 00:13:35,310
Wir sind unter Verwendung der JavaScript-Objekte.

215
00:13:35,310 --> 00:13:38,600
Diese Art von verbessert die Dinge.

216
00:13:38,600 --> 00:13:43,850
Gefällt Ihnen jetzt, werden alle diese Felder von verwandten Informationen zusammen gehalten.

217
00:13:43,850 --> 00:13:46,410
Wenn wir um es zu drucken out gehen, können wir zugreifen Sie die Felder.

218
00:13:46,410 --> 00:13:49,060
>> Beachten Sie, wie wir tust todos [i]. Komplette

219
00:13:49,060 --> 00:13:52,880
anstatt der Prüfung des komplette Array separat,

220
00:13:52,880 --> 00:13:56,560
und bemerken, wenn wir, um die to-do-String, den wir immer die to-do-Eigenschaft bist erhalten möchten

221
00:13:56,560 --> 00:13:58,750
von diesem todo, so diese Art von macht Sinn, weil

222
00:13:58,750 --> 00:14:01,660
jedes Einzelteil verfügt über diese intrinsischen Eigenschaften über sie.

223
00:14:01,660 --> 00:14:05,650
Es hat eine todo, und es hat, ob es komplette ist oder nicht.

224
00:14:05,650 --> 00:14:11,540
Nicht allzu viele Änderungen dort funktionell, addierten gerade einige mehr zu dem Code.

225
00:14:11,540 --> 00:14:13,430
Dies ist eine Verbesserung auf einigen Fronten, nicht wahr?

226
00:14:13,430 --> 00:14:16,030
Ich meine, wir faktorisiert out der Entwurf, der einen Bit-.

227
00:14:16,030 --> 00:14:20,350
Jetzt haben wir Objekte, um im Grunde einzukapseln diese Daten.

228
00:14:20,350 --> 00:14:27,130
Gibt es irgendetwas, mehr wir von hier aus in Begriffe von JavaScript tun konnte,?

229
00:14:27,130 --> 00:14:31,810
Mag vorherige Ankündigung, dass dieser Code rechts Sie hier,

230
00:14:31,810 --> 00:14:34,760
für das Erhalten der inneren HTML-Code einer div

231
00:14:34,760 --> 00:14:40,520
ist ein wenig, Ich schätze,, lang.

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

233
00:14:45,100 --> 00:14:48,400
Eine Sache, wir tun, um machen dieses Code aussehen ein wenig freundlicher könnte

234
00:14:48,400 --> 00:14:51,450
so würde ich nicht haben zu halten Scrolling-links und rechts, hin und her,

235
00:14:51,450 --> 00:14:58,480
ist Ich konnte eine Bibliothek wie jQuery zu verwenden.

236
00:14:58,480 --> 00:15:02,710
>> Lassen Sie uns prüfen out Seminar 2,

237
00:15:02,710 --> 00:15:05,880
und dies ist die gleichen Code, aber es ist mit jQuery getan.

238
00:15:05,880 --> 00:15:08,790
Sie sind möglicherweise nicht allzu vertraut mit jQuery,

239
00:15:08,790 --> 00:15:11,510
aber weiß nur, dass jQuery sort von einer Bibliothek für JavaScript ist

240
00:15:11,510 --> 00:15:15,910
das macht es einfacher, um Dinge wie Zugang einzelnen Elemente der DOM zu tun.

241
00:15:15,910 --> 00:15:21,280
Hier anstatt zu sagen, document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
I können die viel sauberer Art und Weise in jQuery zu verwenden,

243
00:15:25,210 --> 00:15:28,490
welches ist, nur um Selektoren zu verwenden.

244
00:15:28,490 --> 00:15:31,300
Wie Sie sehen können, kam es zu dieser Code zu erhalten ein wenig cleaner,

245
00:15:31,300 --> 00:15:35,770
sehr ähnlich funktionell, aber, dass ist die Idee.

246
00:15:35,770 --> 00:15:37,980
Wir haben ein paar der Dinge gesehen, so weit,

247
00:15:37,980 --> 00:15:42,010
so wir begann mit nur raw JavaScript-Implementierung.

248
00:15:42,010 --> 00:15:45,370
Wir neue Features hinzugefügt und zeigte, wie können wir es mit zu verbessern

249
00:15:45,370 --> 00:15:49,090
genau das, was wir haben in JavaScript aktivierst.

250
00:15:49,090 --> 00:15:53,300
>> Does anybody sehen irgendwelche Schwierigkeiten mit dieses Design?

251
00:15:53,300 --> 00:16:01,090
Nämlich, guess-oder I nicht notwendigerweise Schwierigkeiten, aber lassen Sie uns sagen

252
00:16:01,090 --> 00:16:04,830
wir wurden nicht tun eine to-do-Liste Projekt, und morgen haben wir uns entschlossen

253
00:16:04,830 --> 00:16:10,320
wir wollten, um eine grocery list oder eine Shopping-Liste Projekt zu machen.

254
00:16:10,320 --> 00:16:14,150
A Menge von diesen Features sind sehr ähnlich.

255
00:16:14,150 --> 00:16:19,080
A Menge von den Dinge, die wir wollen raus aus von JavaScript sind sehr häufig,

256
00:16:19,080 --> 00:16:23,820
und dies unterstreicht die Notwendigkeit für irgendeine Art von Art und Weise von

257
00:16:23,820 --> 00:16:25,670
so dass dies leichter zu tun.

258
00:16:25,670 --> 00:16:30,400
Ich hatte zu bauen up all von diesem HTML-Zugang, all Sie dieses DOM-Zugang,

259
00:16:30,400 --> 00:16:35,530
wie ich bin gehen, um die, um-do Liste mit diesem Modell repräsentieren.

260
00:16:35,530 --> 00:16:39,130
Und bemerken, Ich bin verantwortlich als der JavaScript-Entwickler

261
00:16:39,130 --> 00:16:42,890
für die Aufbewahrung Sie den HTML-und JavaScript-, dass ich haben in sync.

262
00:16:42,890 --> 00:16:48,040
Nothing automatisch gemacht, dass JavaScript-Darstellung

263
00:16:48,040 --> 00:16:51,590
oder die to-do-Liste out, um HTML geschoben bekommen.

264
00:16:51,590 --> 00:16:54,000
Nothing, dass mit Ausnahme für mich durchgesetzt werden.

265
00:16:54,000 --> 00:16:56,880
Ich hatte, um die draw to-do-Liste Funktion schreiben zu können.

266
00:16:56,880 --> 00:17:01,650
Und sich möglicherweise als nicht sein-I meine, es ist zumutbar wäre,, dass zu tun,

267
00:17:01,650 --> 00:17:03,670
aber es kann sehr mühsam sein manchmal.

268
00:17:03,670 --> 00:17:08,190
Wenn Sie ein größeres Projekt haben, Könnte sein, dass schwierig.

269
00:17:08,190 --> 00:17:10,720
>> Frameworks, einer der Zwecke von Frameworks

270
00:17:10,720 --> 00:17:14,060
ist, um diesen Prozess und sort von Faktor zu vereinfachen out

271
00:17:14,060 --> 00:17:16,950
diese common-Ich vermute, Sie könnte sagen,-design Mustern

272
00:17:16,950 --> 00:17:20,700
, dass die Menschen haben in der Regel irgendeine Art von Art und Weise von die Daten repräsentieren,

273
00:17:20,700 --> 00:17:25,599
, ob das ist ein Freunde Liste,, ob, dass MAP Informationen ist in der

274
00:17:25,599 --> 00:17:27,280
oder etwas oder a to-do-Liste.

275
00:17:27,280 --> 00:17:30,660
Einige Leute haben im Allgemeinen einen Weg von Darstellung von Informationen,

276
00:17:30,660 --> 00:17:33,650
und sie in der Regel brauchen, um, dass die Informationen sort von zu halten in sync

277
00:17:33,650 --> 00:17:36,520
zwischen dem, was der Benutzer sieht in irgendeiner Art von view,

278
00:17:36,520 --> 00:17:39,850
Sprechen in Begriffe von wie das Modell Ansicht-Controller, dass Sie in Vortrag sah,

279
00:17:39,850 --> 00:17:45,400
und dann wird die-Modell, das in diesem Fall ist dies JavaScript-Array.

280
00:17:45,400 --> 00:17:49,020
Frameworks geben Sie uns eine Weg, um, dass die Problem zu lösen.

281
00:17:49,020 --> 00:17:53,080
Now lasst uns werfen Sie einen Blick an der Umsetzung der dies to-do-Liste

282
00:17:53,080 --> 00:18:02,360
in einem Framework namens angularjs.

283
00:18:02,360 --> 00:18:04,650
Das ist es. Beachten Sie, es passt auf einer Folie.

284
00:18:04,650 --> 00:18:07,330
Ich glaube nicht, haben, um zu der linken und rechten zu blättern.

285
00:18:07,330 --> 00:18:10,460
Das wahrscheinlich ist nicht ein großer Grund zu empfehlen die Verwendung von einen Rahmen,

286
00:18:10,460 --> 00:18:20,120
aber vorherige Ankündigung bin, die ich je den Zugriff auf einzelne HTML-Elemente hier?

287
00:18:20,120 --> 00:18:22,400
Bin ich jemals gehen in die DOM?

288
00:18:22,400 --> 00:18:26,120
Siehst du eine beliebige document.getElementById oder so etwas wie, dass?

289
00:18:26,120 --> 00:18:29,870
Nein, das ist gegangen.

290
00:18:29,870 --> 00:18:35,590
>> Angular hilft uns halten Sie die DOM und unsere JavaScript Repräsentation von etwas

291
00:18:35,590 --> 00:18:40,430
Art von in sync, so dass, wenn es ist nicht in der js-Datei,

292
00:18:40,430 --> 00:18:46,790
, wenn es gibt keinen Weg von programmgesteuert bekommen, um alle diesem HTML-Inhalt

293
00:18:46,790 --> 00:18:51,800
aus dem JavaScript wie sollen wir die Geheimhaltung dieses in sync?

294
00:18:51,800 --> 00:18:58,160
Wenn es nicht in der. Js-Datei, ist es bekam, um in HTML sein, nicht wahr?

295
00:18:58,160 --> 00:19:01,910
Dies ist die neue Version von der HTML-Datei,

296
00:19:01,910 --> 00:19:04,660
und bemerken wir, hinzugefügt haben eine Menge Sie hier,.

297
00:19:04,660 --> 00:19:11,110
Beachten Sie, es gibt diese neuen Attribute, die ng-Klick und ng-repeat sagen,.

298
00:19:11,110 --> 00:19:15,650
Angular Der Ansatz zur Lösung dieses Problems von Schwierigkeiten in Design

299
00:19:15,650 --> 00:19:19,130
ist es, im Grunde machen HTML viel mehr mächtig.

300
00:19:19,130 --> 00:19:24,420
Angular ist ein Weg, von so dass Sie zu machen HTML etwas mehr expressive.

301
00:19:24,420 --> 00:19:30,520
Zum Beispiel, kann ich sagen, dass ich werde zu binden oder zu binden Sie dieses Textfeld,

302
00:19:30,520 --> 00:19:35,080
auf eine Variable innerhalb meine Angular JavaScript-Code.

303
00:19:35,080 --> 00:19:37,030
Dieses ng-model genau das tut.

304
00:19:37,030 --> 00:19:41,550
, Dass im Grunde sagt, dass das Einzelteil, das Innenseite des diesem Text box,

305
00:19:41,550 --> 00:19:45,000
gerade assoziieren, dass mit der variable new_todo_description

306
00:19:45,000 --> 00:19:47,870
innerhalb des JavaScript-Code.

307
00:19:47,870 --> 00:19:51,600
Das ist sehr mächtig, weil I nicht haben, um explizit zu gehen

308
00:19:51,600 --> 00:19:53,310
die DOM zu bekommen, dass Informationen.

309
00:19:53,310 --> 00:19:56,250
I nicht haben, um document.getElementById sagen,.

310
00:19:56,250 --> 00:19:58,750
I nicht haben, um jQueries wie DOM Zugang zu verwenden.

311
00:19:58,750 --> 00:20:03,280
I können es mit einem variable assoziieren, und dann, wenn ich, dass Variable zu ändern

312
00:20:03,280 --> 00:20:07,400
innerhalb JavaScript es ist in sync mit dem HTML-gehalten,

313
00:20:07,400 --> 00:20:11,640
, so dass vereinfacht den Prozess des Habens, um zurück und her gehen zwischen den beiden.

314
00:20:11,640 --> 00:20:18,260
Macht das Sinn?

315
00:20:18,260 --> 00:20:22,060
>> Und bemerken, es gibt keinen HTML-Zugriff-Code.

316
00:20:22,060 --> 00:20:27,760
Wir haben gerade gemacht HTML mehr mächtig,

317
00:20:27,760 --> 00:20:32,070
und jetzt, zum Beispiel, können wir Dinge wie dies zu tun,

318
00:20:32,070 --> 00:20:38,610
mögen, wann Sie klicken Sie auf diese, rufen Sie dieses Funktion innerhalb den Anwendungsbereich der todos.js,

319
00:20:38,610 --> 00:20:43,410
und wir konnten, dass, bevor zu tun, aber es gibt andere Dinge, wie dieser ng-model,

320
00:20:43,410 --> 00:20:47,020
und bemerken, Sie dieses ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Was wissen Sie denken, daß diese tut?

322
00:20:51,520 --> 00:20:54,390
Hier ist unsere ungeordnete Liste aus der Zeit vor.

323
00:20:54,390 --> 00:20:56,470
Wir haben die ul-Tags,

324
00:20:56,470 --> 00:21:03,710
, bin aber, die ich je Rendern diese Liste Innenseite des JavaScript-Code?

325
00:21:03,710 --> 00:21:09,280
Ich bin nicht jemals explizit Rendern, dass die Liste.

326
00:21:09,280 --> 00:21:11,580
Wie funktioniert das?

327
00:21:11,580 --> 00:21:16,410
Nun, vollbringt die Art und Weise Angular dies ist dies aufgerufen wird ein Repeater.

328
00:21:16,410 --> 00:21:22,760
Im Grunde ist dies sagt, dass ich, um dieses HTML ausdrucken möchten

329
00:21:22,760 --> 00:21:26,240
für jeden todo Innenseite meiner todos-Array.

330
00:21:26,240 --> 00:21:31,850
Inside of todos.jr gibt es a todos Array rechts Sie hier,,

331
00:21:31,850 --> 00:21:37,910
, und dies wird Angular go durch diesem Array zu erzählen, und für jedes Element Sie sehen,

332
00:21:37,910 --> 00:21:41,390
I möchten, dass Sie, um dieses HTML zu drucken.

333
00:21:41,390 --> 00:21:44,620
Dies ist eine Art von awesome, weil ich gerade können dies tun,

334
00:21:44,620 --> 00:21:47,760
, ohne dass, um eine for-Schleife zu schreiben,

335
00:21:47,760 --> 00:21:52,250
, welche für ein In den-do-Liste, die nur 30 Zeilen von Code war

336
00:21:52,250 --> 00:21:54,700
ist vielleicht nicht die die meisten von Vorteil Sache sein,

337
00:21:54,700 --> 00:22:01,240
aber wenn Sie ein großes Projekt haben, könnte dies zu bekommen sehr bequem.

338
00:22:01,240 --> 00:22:06,100
>> Dies ist einer Lösung für dieses Problem, so dass HTML mehr mächtig,

339
00:22:06,100 --> 00:22:10,820
und das ermöglicht es uns, JavaScript-und HTML-in sync zu halten.

340
00:22:10,820 --> 00:22:13,220
Es gibt andere mögliche Möglichkeiten, um dieses Problem zu lösen,

341
00:22:13,220 --> 00:22:15,320
und nicht jeder Rahmen tut dies.

342
00:22:15,320 --> 00:22:17,720
Nicht jeder Rahmen arbeitet entlang diesen Linien.

343
00:22:17,720 --> 00:22:19,490
Einige Frameworks haben unterschiedliche Ansätze,

344
00:22:19,490 --> 00:22:23,310
und Sie können feststellen, dass Ihnen spass bei in ein Gerüstkohlenstoffatom über den anderen Codierung.

345
00:22:23,310 --> 00:22:26,160
Lassen Sie uns an einem mehr zu suchen.

346
00:22:26,160 --> 00:22:30,060
Dies ist die to-do-Liste up in einem Framework namens Backbone codiert.

347
00:22:30,060 --> 00:22:33,250
I bin gehen, um durch dies schnell zu gehen.

348
00:22:33,250 --> 00:22:38,300
Ich werde mit dem HTML zu starten, bevor wir dorthin zu gehen.

349
00:22:38,300 --> 00:22:40,290
One Sekunde.

350
00:22:40,290 --> 00:22:43,950
Beginnend mit dem HTML,, wie Sie bemerken, die ist unser HTML sehr ähnlich

351
00:22:43,950 --> 00:22:50,000
zu dem, was es war, bevor, so nicht zu viel neue an dieser Front.

352
00:22:50,000 --> 00:22:55,410
Aber unsere js-Datei ist ein wenig anders.

353
00:22:55,410 --> 00:23:00,360
Backbone Art hat diese Idee, oder baut auf der Idee

354
00:23:00,360 --> 00:23:04,750
, dass eine Menge von dem, was wir tun, mit, sagen wir, unsere JavaScript Projekte

355
00:23:04,750 --> 00:23:09,110
wird über Modelle und Sammlungen dieser Modelle denken.

356
00:23:09,110 --> 00:23:12,510
Dies könnte zum Beispiel ein Foto und Sammlungen von Fotos,

357
00:23:12,510 --> 00:23:16,230
oder die Idee eines Freundes und Sammlungen von Freunden.

358
00:23:16,230 --> 00:23:20,700
Und oft, wenn wir die Programmierung von JavaScript-Anwendungen

359
00:23:20,700 --> 00:23:25,340
wir Art stellen die Idee, eine Sammlung von Freunden

360
00:23:25,340 --> 00:23:29,500
irgendwie in JavaScript gibt und Backbone uns diese Schicht

361
00:23:29,500 --> 00:23:33,040
auf der Oberseite des bestehenden Arrays von JavaScript und Objekte

362
00:23:33,040 --> 00:23:38,300
mehr mächtige Dinge mit, dass mehr einfach tun.

363
00:23:38,300 --> 00:23:41,870
>> Hier habe ich eine To-Do-Modell definiert,

364
00:23:41,870 --> 00:23:44,630
und Sie müssen nicht zu viel Sorgen über die Syntax,

365
00:23:44,630 --> 00:23:48,730
aber feststellen, dass das, was man von den Eigenschaften ist das?

366
00:23:48,730 --> 00:23:53,190
Es verfügt über eine Standard-Bereich.

367
00:23:53,190 --> 00:23:56,640
Backbone ermöglicht mir schon geben der Fledermaus

368
00:23:56,640 --> 00:24:00,190
jede neue zu tun, dass ich schaffen wird, diese Standards zu haben.

369
00:24:00,190 --> 00:24:04,100
Jetzt kann ich anpassen, aber in der Lage, die Vorgaben festlegen

370
00:24:04,100 --> 00:24:07,220
ist schön, und es ist irgendwie praktisch, weil das ist nicht etwas, das wie ist

371
00:24:07,220 --> 00:24:10,430
innewohnenden JavaScript und jetzt weiß ich nicht explizit

372
00:24:10,430 --> 00:24:12,430
sagen, dass die todos unvollständig sind.

373
00:24:12,430 --> 00:24:19,190
Ich kann auf Anhieb sagen, dass todos gehen als unvollständig markiert.

374
00:24:19,190 --> 00:24:21,300
Beachten Sie dann, was ist das?

375
00:24:21,300 --> 00:24:25,520
Jetzt habe ich eine To-do-Liste, und das ist eine Sammlung.

376
00:24:25,520 --> 00:24:30,960
Beachten Sie das Feld mit, das Modell todo sagt verbunden.

377
00:24:30,960 --> 00:24:33,390
Das ist meine Art zu sagen, Backbone, dass

378
00:24:33,390 --> 00:24:37,350
Ich werde über eine Sammlung von diesen einzelnen todos denken.

379
00:24:37,350 --> 00:24:42,140
Dies ist im Grunde die Modellstruktur für mein Programm.

380
00:24:42,140 --> 00:24:44,980
Hier habe ich diese Idee aus einer Sammlung,

381
00:24:44,980 --> 00:24:48,960
und im Grunde die Einzelteile, in dieser Sammlung enthalten sind, all gehen, um diese todos sein,

382
00:24:48,960 --> 00:24:51,910
und das ist sehr natürlich in diesem Sinne

383
00:24:51,910 --> 00:24:59,890
weil ich habe todos, und ich habe sie in einer Sammlung.

384
00:24:59,890 --> 00:25:02,940
>> Lassen Sie uns ein wenig mehr von so aussehen.

385
00:25:02,940 --> 00:25:05,900
Hier ist ein Backbone Aussicht.

386
00:25:05,900 --> 00:25:08,890
Die andere Sache, die Backbone sagt, ist, dass

387
00:25:08,890 --> 00:25:14,660
a lot der Modelle, dass du denkst etwa oder sogar Sammlungen

388
00:25:14,660 --> 00:25:19,150
gehen zu müssen, um etwas über die angezeigt haben.

389
00:25:19,150 --> 00:25:21,900
Wir müssen machen, dass To-do-Liste,

390
00:25:21,900 --> 00:25:25,460
und wäre es nicht schön, wenn wir für jedes Modell könnte

391
00:25:25,460 --> 00:25:28,390
oder mit jedem Modell assoziieren diese view

392
00:25:28,390 --> 00:25:34,020
Das erlaubt uns, ich denke, verbinden die beiden zusammen?

393
00:25:34,020 --> 00:25:38,320
Während wir vorher musste eine for-Schleife, die durchlaufen verwenden würde

394
00:25:38,320 --> 00:25:41,130
jeden todo in unserer Liste und drucken Sie dann it out Sie hier,

395
00:25:41,130 --> 00:25:44,650
können wir im Grunde verbinden Sie es mit diesem Modell.

396
00:25:44,650 --> 00:25:47,550
Dies ist eine To-do-Ansicht.

397
00:25:47,550 --> 00:25:50,550
Dies wird mit der todo fanden wir früher verbunden.

398
00:25:50,550 --> 00:25:54,940
Jetzt kann jeder todo wird anzeigbar oder renderbare

399
00:25:54,940 --> 00:25:56,960
durch diese To-do-Ansicht.

400
00:25:56,960 --> 00:25:59,440
Beachten Sie einige der Felder.

401
00:25:59,440 --> 00:26:05,880
Was denken Sie, diese tagName ist, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Denken Sie daran, aus der Zeit vor, als wollten wir eine todo machen

403
00:26:09,790 --> 00:26:16,700
müssten wir explizit koppeln unsere todos mit diesem li-Tag.

404
00:26:16,700 --> 00:26:21,080
Jetzt werden wir sagen, dass, wenn dies todo wird leben

405
00:26:21,080 --> 00:26:25,250
wird sich in einer li-Tag sein.

406
00:26:25,250 --> 00:26:31,440
Und jetzt sind wir auch das Verknüpfen von Ereignissen mit unseren todos.

407
00:26:31,440 --> 00:26:34,320
>> Jeden todo verfügt über this one-Ereignis aus.

408
00:26:34,320 --> 00:26:38,480
Wenn Sie auf so ziemlich das Toggle-Button, das ist, was ich da sagen,

409
00:26:38,480 --> 00:26:43,080
dann im Grunde markieren die todo als das Gegenteil von dem, was es vorher war

410
00:26:43,080 --> 00:26:45,890
und dann wieder machen die Anwendung.

411
00:26:45,890 --> 00:26:47,810
Dies ist eine Art ähnlich dem Code vor.

412
00:26:47,810 --> 00:26:50,730
Denken Sie daran, wenn wir es markiert als entweder die entgegengesetzte oder-

413
00:26:50,730 --> 00:26:52,410
und dann werden wir neu gerendert es.

414
00:26:52,410 --> 00:26:57,750
Aber jetzt bemerken dieses Ereignis verwendet, um etwas, das in der HTML war sein.

415
00:26:57,750 --> 00:26:59,640
Es saß.

416
00:26:59,640 --> 00:27:01,410
Der Button hatte einen auf Klick.

417
00:27:01,410 --> 00:27:05,310
Wenn Sie auf die Schaltfläche klicken, es ist irgendwie tut das Zeug zu

418
00:27:05,310 --> 00:27:07,210
einzurichten, dass todo unvollständig zu sein.

419
00:27:07,210 --> 00:27:11,180
Hier haben wir habe dieses Ereignis des Anklickens, dass die Toggle-Button assoziiert

420
00:27:11,180 --> 00:27:15,830
und umgekehrt, ob es ein-oder ausgeschaltet ist mit dieser Ansicht.

421
00:27:15,830 --> 00:27:20,480
>> Dies ist eine schöne Möglichkeit für die Einrichtung dieses Ereignis so, dass es sehr fest gebunden ist

422
00:27:20,480 --> 00:27:26,980
zu dieser Ansicht, und so bemerken diese einen mehr.

423
00:27:26,980 --> 00:27:31,050
Ich habe dieses render Methode, und wir müssen nicht durch die Details gehen.

424
00:27:31,050 --> 00:27:33,650
Es ist eine Art ähnlich dem, was wir vorher hatten,

425
00:27:33,650 --> 00:27:36,070
aber feststellen, ich bin nicht Durchschleifen nichts.

426
00:27:36,070 --> 00:27:40,700
Ich bin nicht gedruckt, dass ul-Tag, die Art zu sagen: Ich werde alle Elemente zu drucken ist.

427
00:27:40,700 --> 00:27:46,610
Ich bin die Bereitstellung der Funktionalität zum Rendern dieses eine To-do-Artikel.

428
00:27:46,610 --> 00:27:49,400
Dies ist ein sehr leistungsfähiges Konzept, weil im Grunde

429
00:27:49,400 --> 00:27:53,600
unserer to-do-Liste besteht aus all diesen todos, und wenn wir im Grunde angeben

430
00:27:53,600 --> 00:27:56,890
der Weg zu einer jener todos machen

431
00:27:56,890 --> 00:28:04,230
dann können wir unsere leistungsstarken Backbone per se machen alle todos

432
00:28:04,230 --> 00:28:07,760
durch den Aufruf der render-Methode auf den einzelnen todos.

433
00:28:07,760 --> 00:28:14,180
Dies ist ein Konzept, das nützlich ist hier.

434
00:28:14,180 --> 00:28:18,160
Jetzt eine gute Frage ist, wie wird diese Anwendung ist zusammen?

435
00:28:18,160 --> 00:28:21,200
Denn wir haben die Möglichkeit, eine todo machen,

436
00:28:21,200 --> 00:28:23,860
aber wie bekommen wir die Idee, mehrere todos?

437
00:28:23,860 --> 00:28:25,100
>> Lassen Sie uns werfen Sie einen Blick bei, dass.

438
00:28:25,100 --> 00:28:27,100
Dies ist der letzte Teil.

439
00:28:27,100 --> 00:28:29,740
Beachten wir haben eine To-do-Liste Ansicht hier

440
00:28:29,740 --> 00:28:34,440
und bemerken, dass es auch eine Ansicht.

441
00:28:34,440 --> 00:28:36,970
Und über ein paar Dinge,

442
00:28:36,970 --> 00:28:45,280
diese initialize Methode wird aufgerufen, wenn wir schaffen zum ersten Mal diese to-do-Liste.

443
00:28:45,280 --> 00:28:52,630
Wie Sie sehen können, ist es wie die Schaffung der to-do-Liste und assoziieren sie mit dieser Ansicht.

444
00:28:52,630 --> 00:28:57,860
Und dann habe ich die Funktionen hier also im Grunde, wenn Sie ein Add item-

445
00:28:57,860 --> 00:29:01,440
Dies ist ähnlich dem addItem Methode sahen wir vor-

446
00:29:01,440 --> 00:29:07,430
Ich werde eine neue todo-Objekt erstellen, und ich merke, bin eigentlich Aufruf

447
00:29:07,430 --> 00:29:13,080
diese neue todo Verfahren, so wird dies durch Backbone zur Verfügung gestellt,

448
00:29:13,080 --> 00:29:16,010
und ich kann in meinem Immobilien hier passieren.

449
00:29:16,010 --> 00:29:23,710
Und jetzt jeden todo dass ich create mit diesen erhalten, dass die Funktionalität, die wir zuvor gesehen.

450
00:29:23,710 --> 00:29:28,140
Beachten Sie, ich bin Entrümpelung das Textfeld vor-eine kleine kleine Detail-

451
00:29:28,140 --> 00:29:32,900
und dann bin ich das Hinzufügen dieser Sammlung.

452
00:29:32,900 --> 00:29:37,630
>> Dies scheint fast komisch, weil, bevor wir gerade, dass todos.push tun,

453
00:29:37,630 --> 00:29:43,310
und dann wurden wir getan, und dies mag komplizierter für dieses Projekt,

454
00:29:43,310 --> 00:29:46,980
und Sie können feststellen, dass die Backbone oder auch eckig oder anderen Rahmen

455
00:29:46,980 --> 00:29:50,790
nicht Ihren bestimmtes Projekt, aber ich denke es ist wichtig, darüber nachzudenken,

456
00:29:50,790 --> 00:29:54,100
was bedeutet dies in einem größeren Maßstab für größere Projekte,

457
00:29:54,100 --> 00:29:56,610
denn wenn wir ein größeres Projekt, wo wir vertreten

458
00:29:56,610 --> 00:30:00,860
einige wirklich komplexe Sammlung, etwas tiefer als nur eine To-do-Liste,

459
00:30:00,860 --> 00:30:04,490
sagen wir mal eine Liste mit Freunden oder so ähnlich, könnte dies nützlich sein

460
00:30:04,490 --> 00:30:09,620
weil wir unseren Code in einem wirklich bequem zu organisieren,

461
00:30:09,620 --> 00:30:12,550
in einer Weise, dass es einfacher für jemand anderes würde

462
00:30:12,550 --> 00:30:16,820
wer abholen wollte ein Projekt, um darauf zu bauen.

463
00:30:16,820 --> 00:30:21,450
Sie können sehen, dass dies ein viel Struktur bietet.

464
00:30:21,450 --> 00:30:26,580
Und dann rufe ich machen auf dieser addItem.

465
00:30:26,580 --> 00:30:31,050
Render, wie Sie sehen können, und Sie müssen nicht dieses vollständige Syntax zu erfassen,

466
00:30:31,050 --> 00:30:37,790
aber im Grunde für jedes Modell es geht um die individuelle render-Methode aufrufen.

467
00:30:37,790 --> 00:30:41,500
Das ist eine Art, wo diese herkommt.

468
00:30:41,500 --> 00:30:44,140
Lasst uns einfach festlegen, wie die einzelnen todos machen,

469
00:30:44,140 --> 00:30:47,310
und dann lass uns kleben sie zusammen als Ganzes.

470
00:30:47,310 --> 00:30:49,810
Aber dies stellt einen Weg der Abstraktion,

471
00:30:49,810 --> 00:30:55,470
weil ich die Art, wie ich entscheiden, um die einzelnen todos machen zu ändern,

472
00:30:55,470 --> 00:30:57,940
und ich würde nicht zu einem dieser Code zu ändern.

473
00:30:57,940 --> 00:31:00,700
Das ist irgendwie cool.

474
00:31:00,700 --> 00:31:08,540
>> Hat jemand irgendwelche Fragen über JavaScript-Frameworks?

475
00:31:08,540 --> 00:31:14,310
[Schüler unhörbar Frage]

476
00:31:14,310 --> 00:31:16,050
Oh, sicher, das ist eine große Frage.

477
00:31:16,050 --> 00:31:19,080
Die Frage war, wie habe ich die Rahmenbedingungen enthalten?

478
00:31:19,080 --> 00:31:22,970
Die meisten JavaScript-Frameworks sind im Grunde nur js Dateien

479
00:31:22,970 --> 00:31:25,740
dass Sie an der Spitze des Codes enthalten.

480
00:31:25,740 --> 00:31:29,830
Beachten Sie in dem Kopfteil meines HTML Ich habe all diese Script-Tags,

481
00:31:29,830 --> 00:31:34,250
und das endgültige Skript-Tag ist der Code, den wir geschrieben haben.

482
00:31:34,250 --> 00:31:38,820
Und dann die 3 Rahmen-Codes sind eben auch Skript-Tags.

483
00:31:38,820 --> 00:31:42,110
Ich bin auch davon ab, was heißt ein CDN,

484
00:31:42,110 --> 00:31:46,200
das ermöglicht es mir, es von jemand anderem erhalten an dieser Stelle

485
00:31:46,200 --> 00:31:57,930
aber jeder Rahmen hat dies-man kann so ziemlich finden Sie den Inhalt

486
00:31:57,930 --> 00:32:03,540
für einen bestimmten JavaScript-Bibliothek auf einigen CDN oder so etwas,

487
00:32:03,540 --> 00:32:05,570
und dann können Sie zählen diese Skript-Tags.

488
00:32:05,570 --> 00:32:07,600
Macht das Sinn?

489
00:32:07,600 --> 00:32:09,500
Kühle.

490
00:32:09,500 --> 00:32:11,730
>> Das sind 2 unterschiedliche Ansätze.

491
00:32:11,730 --> 00:32:14,640
Das sind nicht die einzigen Ansätze zur Lösung dieses Problems.

492
00:32:14,640 --> 00:32:17,080
Es gibt viele verschiedene Dinge, die

493
00:32:17,080 --> 00:32:19,490
jemand tun könnte, und es gibt viele Frameworks gibt.

494
00:32:19,490 --> 00:32:23,300
Schräg und Backbone nicht die ganze Geschichte erzählen.

495
00:32:23,300 --> 00:32:26,370
Viel Glück mit Ihrem letzten Projekte, und ich danke Ihnen sehr.

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