1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminario] [JavaScript kadroj: Kial kaj Kiel?]

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

3
00:00:04,000 --> 00:00:06,960
[Ĉi tiu estas CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Saluton, ĉiuj. Bonvenon al la JavaScript kadroj seminario.

5
00:00:10,630 --> 00:00:14,910
Mia nomo estas Kevin, kaj hodiaŭ mi tuj parolos pri JavaScript kadroj,

6
00:00:14,910 --> 00:00:20,400
kaj la celo de tiu seminario estas ne atingi vin, diru, majstri aparta kadro per si mem

7
00:00:20,400 --> 00:00:23,810
sed por doni al vi ampleksan enkonduko al paro de kadroj

8
00:00:23,810 --> 00:00:27,150
kaj montri kial ni devus iam volas uzi kadro.

9
00:00:27,150 --> 00:00:31,060
>> Antaŭ ol mi faros tion, mi havigas iom fono en JavaScript,

10
00:00:31,060 --> 00:00:33,750
kaj tiam ni prenos ĝin de tie.

11
00:00:33,750 --> 00:00:36,270
Ni tuj komencu per apliko de a al-do list.

12
00:00:36,270 --> 00:00:39,330
Jen nia taskaro hodiaŭ.

13
00:00:39,330 --> 00:00:41,990
Estas speco de amuza. Ni devas apliki to-do list en JavaScript.

14
00:00:41,990 --> 00:00:45,110
Ĉi tio estas kio okazas al aspektas tiel, ke estas nia unua celo.

15
00:00:45,110 --> 00:00:47,160
Ni ne tuj uzi kadro por fari tion.

16
00:00:47,160 --> 00:00:51,930
Ni tuj kodo JavaScript kaj akiri la to-do list labori.

17
00:00:51,930 --> 00:00:54,370
Tiam ni iras por plibonigi la dezajno sen uzi kadro.

18
00:00:54,370 --> 00:00:57,190
Ni tuj diskuti diversajn aferojn, kiujn ni povas fari kun nur JavaScript sola

19
00:00:57,190 --> 00:01:00,650
fari nian to-do listigi iom pli bone desegnita.

20
00:01:00,650 --> 00:01:02,490
Tiam ni iras por ĵeti en iuj jQuery,

21
00:01:02,490 --> 00:01:05,030
kaj poste ni iras al rigardi la sama to-do list,

22
00:01:05,030 --> 00:01:07,170
nur implementado en malsamaj kadroj, kaj ni diskutos

23
00:01:07,170 --> 00:01:09,280
 la avantaĝoj kaj malavantaĝoj dum la vojo.

24
00:01:09,280 --> 00:01:12,040
>> Komencu apliki ke to-do list.

25
00:01:12,040 --> 00:01:14,270
Diru ni donas ĉi HTML.

26
00:01:14,270 --> 00:01:16,620
Mi tuj faros ĉi iom pli malgranda.

27
00:01:16,620 --> 00:01:19,300
Kiel vi povas vidi, mi havas malmultan header kiu diras Ĉiun

28
00:01:19,300 --> 00:01:21,740
kaj iom skatolo, kie mi povas eniri priskribo de ĉiu

29
00:01:21,740 --> 00:01:26,990
kaj tiam nova ero butonon, do ni provu enmeti novajn todo al ĉi tiu listo.

30
00:01:26,990 --> 00:01:31,000
Donu JavaScript kadroj seminario,

31
00:01:31,000 --> 00:01:33,090
kaj mi estas bati novan eron.

32
00:01:33,090 --> 00:01:35,730
Mi alvenas ĉi JavaScript garde kiu diras apliki mi.

33
00:01:35,730 --> 00:01:37,560
Ni devas apliki ĝin.

34
00:01:37,560 --> 00:01:41,490
Ni kontrolu la kodon por tiu, tiel la HTML kaj la JavaScript.

35
00:01:41,490 --> 00:01:43,260
Jen nia HTML.

36
00:01:43,260 --> 00:01:45,500
Kiel vi povas vidi ĉi tie, jen nia eta Ĉiuj kaploko.

37
00:01:45,500 --> 00:01:47,620
Tio estis tiu aŭdaca afero ĉe la supro,

38
00:01:47,620 --> 00:01:50,690
kaj tiam ni havas la eniga kesto kun la lokokupilo,

39
00:01:50,690 --> 00:01:59,460
kaj tiam ekzistas iu atributo de tiu butono kiu nomas tiun funkcion addTodo.

40
00:01:59,460 --> 00:02:05,460
Ĉu iu volas diveni ke sur klako estas aludo?

41
00:02:05,460 --> 00:02:07,390
[Studenta inaudibles respondon]

42
00:02:07,390 --> 00:02:09,289
Bone, la sur klako estas speco de kiel evento,

43
00:02:09,289 --> 00:02:12,120
kiel klakante la muso estas nur evento, kaj kion ni faras

44
00:02:12,120 --> 00:02:16,890
estas ni ligante la evento de alklakante tiun butonon por ekzekuti tiu funkcio.

45
00:02:16,890 --> 00:02:21,700
AddTodo estas ĉi eventa traktilo por klakante ke butonon.

46
00:02:21,700 --> 00:02:25,010
>> Kiel vi povas vidi, kiam mi premas la novan eron butono

47
00:02:25,010 --> 00:02:29,940
la sur klako okazaĵo gets pafis, kaj ĉi tiu funkcio prenas nomata.

48
00:02:29,940 --> 00:02:33,170
Ni rigardu funkcio.

49
00:02:33,170 --> 00:02:36,260
Kiel vi povas vidi, jen mia kodo JavaScript ĝis nun.

50
00:02:36,260 --> 00:02:41,280
Kion mi havas en la pinto estas tutmonda datumstrukturo por mia to-do list.

51
00:02:41,280 --> 00:02:44,060
Ĝi aspektas kiel tabelo. Estas nur malplenan tabelo.

52
00:02:44,060 --> 00:02:47,100
Kaj tiam mi havas la addTodo funkcio, kiun ni vidis antaŭe,

53
00:02:47,100 --> 00:02:50,740
kaj la sola linio de kodo en ekzistas ĉi tiu garde.

54
00:02:50,740 --> 00:02:55,730
Garde apliki mi, kaj tiam mi havas 2 taskoj alproksimiĝis.

55
00:02:55,730 --> 00:02:58,790
Mi devas adicii la todo al tiu tutmonda datumstrukturo,

56
00:02:58,790 --> 00:03:01,860
kaj tiam mi volas elsxovas la por-do list.

57
00:03:01,860 --> 00:03:06,360
Nenio tro sxajnas simple ankoraŭ, sed JavaScript vi estu ne konas,

58
00:03:06,360 --> 00:03:12,370
do mi tuj iros malrapida kaj revizii la fundamentojn de JavaScript en tiu vojo.

59
00:03:12,370 --> 00:03:15,490
>> Ni donu tiun ŝoton.

60
00:03:15,490 --> 00:03:21,130
Diru la uzanto enigas ion en tiu skatolo.

61
00:03:21,130 --> 00:03:23,360
Mi ĵus tajpis ion en ĉi tie, tekston.

62
00:03:23,360 --> 00:03:27,620
Kjel mi ordigi de aliro kiu teksto per JavaScript?

63
00:03:27,620 --> 00:03:32,500
Memoru ke JavaScript, unu el liaj fundamentaj trajtoj estas kiu donas al ni

64
00:03:32,500 --> 00:03:34,670
ĉi programita aliro al la DOM.

65
00:03:34,670 --> 00:03:40,670
Ĝi permesas al ni aliri elementoj kaj iliaj propraĵoj de ĉi tiu reala HTML.

66
00:03:40,670 --> 00:03:43,430
La maniero ni faras tion kun nudaj ostoj JavaScript

67
00:03:43,430 --> 00:03:51,360
estas ni povas efektive uzi funkcio en JavaScript nomata getElementByID.

68
00:03:51,360 --> 00:03:55,140
Mi volas konservi la teksto kiu estas tajpita tie en iu variablo,

69
00:03:55,140 --> 00:03:58,350
do mi tuj diros nova variablo nomata new_todo,

70
00:03:58,350 --> 00:04:01,980
kaj mi tuj atingi tiun elementon.

71
00:04:01,980 --> 00:04:06,330
Tiu estas funkcio,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Kaj nun mi ricevas elementon de ID, do mi bezonas la ID de tiu teksto skatolo,

73
00:04:11,580 --> 00:04:15,860
tial mi donis al ĝi la ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Tiel estas kiel mi iros akiri elemento.

75
00:04:18,399 --> 00:04:23,880
Tiu estas mia argumento por ĉi tiu funkcio, specifi kiujn ID akiri.

76
00:04:23,880 --> 00:04:28,110
Kaj tiel tio estas ero en HTML, kaj ĝi havas ecojn.

77
00:04:28,110 --> 00:04:30,650
Vi vidis tiujn. Ili estas atributoj.

78
00:04:30,650 --> 00:04:37,090
La atributo de la teksto elemento kiu stokas la uzanto enigo nomas valoro.

79
00:04:37,090 --> 00:04:40,860
Mi savis la valoro de tiu teksto skatolo nun en ĉi tiu variablo nomata new_todo.

80
00:04:40,860 --> 00:04:45,040
Nun mi havas programita aliron al ĉi tiu variablo, kiu estas speco de malvarmeta

81
00:04:45,040 --> 00:04:49,200
ĉar nun kion mi povas fari estas mi povas aldoni ĝin al mia to-do list.

82
00:04:49,200 --> 00:04:52,870
>> La maniero ni devus fari tion en JavaScript-kaj ne maltrankviliĝu se vi ne konas tion,

83
00:04:52,870 --> 00:04:57,010
sed ĝuste iras tra ĝi estas todos.push

84
00:04:57,010 --> 00:05:00,130
ĉar tio estas la nomo de mia tutmonda datumstrukturo ĝis ĉi tie,

85
00:05:00,130 --> 00:05:04,450
kaj mi tuj puŝi new_todo.

86
00:05:04,450 --> 00:05:09,120
Ĉi tio estas granda ĉar nun mi aldonis ĝin al mia JavaScript

87
00:05:09,120 --> 00:05:11,280
reprezento de tiu to-do list.

88
00:05:11,280 --> 00:05:15,170
Sed nun how do I get it reen al la HTML?

89
00:05:15,170 --> 00:05:18,560
Mi devas trovi metodon por ordigi de puŝi ĝin reen.

90
00:05:18,560 --> 00:05:21,830
Alivorte, mi specon de devos desegni ĉi.

91
00:05:21,830 --> 00:05:26,060
Kion ni faros estas ni iras al desegni la to-do list.

92
00:05:26,060 --> 00:05:29,270
Mi bezonas ĝisdatigi aliaj HTML sur tiu paĝo,

93
00:05:29,270 --> 00:05:32,040
kaj kiel vi povas vidi, kiujn mi lasis tiun malgrandan ujon tie,

94
00:05:32,040 --> 00:05:36,840
ĉi dividanton de la paĝo kies ID estas todos,

95
00:05:36,840 --> 00:05:40,870
kaj mi tuj metis la to-do list tie.

96
00:05:40,870 --> 00:05:47,240
Unue mi iros por liberigi ĝin ĉar, ekzemple, tie estis malnova to-do list tie.

97
00:05:47,240 --> 00:05:49,560
Mi ricevas tiu elemento per ID denove,

98
00:05:49,560 --> 00:05:54,530
kaj mi konsentas la interna HTML de tiu elemento,

99
00:05:54,530 --> 00:05:58,010
kaj mi tuj certe ke.

100
00:05:58,010 --> 00:06:05,510
Se ni forlasis tiun kodon kiel estas, ni vidus malplenan nenio tie,

101
00:06:05,510 --> 00:06:10,410
kaj nun mi volas komenci farante mian novan to-do list.

102
00:06:10,410 --> 00:06:12,870
Mi esence tuj forviŝi mia to-do list.

103
00:06:12,870 --> 00:06:18,180
>> Nun la interna HTML ene de tiu todos div estas tute klara,

104
00:06:18,180 --> 00:06:20,060
kaj nun mi bezonas komenci aldonante mia listo.

105
00:06:20,060 --> 00:06:23,890
La unua afero, kiun mi volas aldoni dorso estas la ordigita listo etikedo,

106
00:06:23,890 --> 00:06:33,890
kiu esence signifas ke ĉi tiu estas la komenco de neordigitan liston.

107
00:06:33,890 --> 00:06:39,770
Nun por ĉiu elemento en mia todos tabelo Mi volas presi ĝin ene de tiu HTML.

108
00:06:39,770 --> 00:06:43,710
Mi volas postglui ĝin sur la malsupro de tiu ĉi listo.

109
00:06:43,710 --> 00:06:49,040
Same kiel en C, mi povas uzi por ciklo, kaj mi tuj komencos je la komenco de mia listo

110
00:06:49,040 --> 00:06:54,140
ĉe elemento 0, kaj Mi tuj iros tuta vojo al la longo de la listo.

111
00:06:54,140 --> 00:07:01,100
Ni povas vere akiri la longo de tabelo en JavaScript uzante la longo proprieto.

112
00:07:01,100 --> 00:07:03,420
Esence mi faros iun tre simila ene de ĉi tie

113
00:07:03,420 --> 00:07:05,600
por presi tiu elemento.

114
00:07:05,600 --> 00:07:12,970
Mi povas denove atingi la todos div, la interna HTML posedaĵo de tiu,

115
00:07:12,970 --> 00:07:17,560
kaj mi tuj aldonu sur ĉi nova listeron, kaj tio tuj estos ĉirkaŭita de

116
00:07:17,560 --> 00:07:25,390
ĉi span etikedo, kaj mi tuj concatenate kun la + operatoro,

117
00:07:25,390 --> 00:07:28,040
kaj tio estas la th,-a ero de mia todos tabelo,

118
00:07:28,040 --> 00:07:32,380
kaj tiam Mi tuj fermos tiu etikedo.

119
00:07:32,380 --> 00:07:36,240
Nun por ĉiu elemento ni aldoni novan liston eniro.

120
00:07:36,240 --> 00:07:48,700
Kaj tiam ĉiuj ni vere bezonas fari estas fermi tiu etikedo.

121
00:07:48,700 --> 00:07:52,820
Mi nur bezonas fermi ke Neordigita listo etikedo.

122
00:07:52,820 --> 00:07:55,490
>> Ĉu vi ricevas emo al kiel tiu funkcias?

123
00:07:55,490 --> 00:07:57,700
Ĉi tio malfermas la tuta listo.

124
00:07:57,700 --> 00:08:01,080
Ĉi tio aldonas individuaj elementoj de la todos liston al la listo,

125
00:08:01,080 --> 00:08:05,470
kaj tiam kiu fermas la tutan liston, kaj tiu estas mia addTodo funkcio.

126
00:08:05,470 --> 00:08:09,590
Mi esence komenci per atingi la todo el la teksta kadro.

127
00:08:09,590 --> 00:08:18,950
Mi aldonu, ke la todos tabelo, kaj tiam mi re-redonu la to-do list.

128
00:08:18,950 --> 00:08:21,520
Nun mi povas aldoni elementojn al mia listo.

129
00:08:21,520 --> 00:08:24,620
Ĉi tiu estas speco de ekscita ĉar en nur kelkaj linioj de kodo

130
00:08:24,620 --> 00:08:28,240
ni esence faris to-do list kie ni povas aldoni erojn.

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

132
00:08:30,050 --> 00:08:34,480
Tio estas speco de baza enkonduko al JavaScript.

133
00:08:34,480 --> 00:08:36,179
Ne tro maltrankviliĝu pri la sintakso por la momento,

134
00:08:36,179 --> 00:08:38,130
sed pensas pri tiu koncepte.

135
00:08:38,130 --> 00:08:40,539
Ni havis iom da HTML.

136
00:08:40,539 --> 00:08:45,310
Ni havis teksto skatolon sur la paĝo kiu esence permesis uzantoj input a al-do ero por aldoni.

137
00:08:45,310 --> 00:08:49,210
Kaj tiam ni uzas JavaScript por venigi ke ĉiu el tiu teksto skatolo.

138
00:08:49,210 --> 00:08:52,830
Ni stokas ke ene de JavaScript tabelo, kiu estas esence kiel

139
00:08:52,830 --> 00:08:56,010
nia programita reprezento de tiu to-do list,

140
00:08:56,010 --> 00:08:59,060
kaj poste ni presas ĝin.

141
00:08:59,060 --> 00:09:02,690
Ĉi tiu estas todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Ĉi tiu estas speco de cool, sed kiel ni povas utiligi ĉi tiun pli?

143
00:09:07,620 --> 00:09:11,350
Nu, kiel vi povas vidi, ĉi tio ne estas kiel kompleta to-do list.

144
00:09:11,350 --> 00:09:15,100
Ekzemple, mi ne povas marki neniun el tiuj artikoloj kiel nekompleta,

145
00:09:15,100 --> 00:09:19,920
kiel se mi volis reprioritize la artikoloj aŭ forigi erojn.

146
00:09:19,920 --> 00:09:23,150
Ĉi tio estas bone, sed ni povas utiligi ĉi tiun fojon.

147
00:09:23,150 --> 00:09:29,280
Mi ne tuj tro parolas pri aldonante ekstrajn funkciojn,

148
00:09:29,280 --> 00:09:32,800
sed ni povus preni tiun fojon.

149
00:09:32,800 --> 00:09:35,970
Ni parolos pri aldonante pli karakteriza por tiu al-do list,

150
00:09:35,970 --> 00:09:40,370
kiu tuj estos povi kontroli individuo to-do ero

151
00:09:40,370 --> 00:09:44,780
kaj oni forstrekis, do esence dirante mi faris tion.

152
00:09:44,780 --> 00:09:50,240
Ni rigardu kelkajn kodo kiu povus plenumi tion.

153
00:09:50,240 --> 00:09:52,740
Rimarku kion mi faris ĉe la pinto estas mi aldonis

154
00:09:52,740 --> 00:09:57,620
nova tutmonda tabelo nomita kompleta.

155
00:09:57,620 --> 00:10:02,890
Mi esence uzante ĉi stoki ĉu la artikoloj en la por-do list

156
00:10:02,890 --> 00:10:06,560
estas kompletaj aŭ ne.

157
00:10:06,560 --> 00:10:08,470
Tiu estas unu maniero por fari tion.

158
00:10:08,470 --> 00:10:13,750
Se mi rigardas la efektivigo de ĉi tio, la montro,

159
00:10:13,750 --> 00:10:21,120
esence, se mi eniras en todo kaj mi min pelas ĉi ebligi butono

160
00:10:21,120 --> 00:10:25,040
ĝi transiras, do cxiu menuero en tiu listo havas ĉu kompleta

161
00:10:25,040 --> 00:10:31,050
aŭ nekompleta stato, kaj Mi uzas alian tabelo por reprezenti tion.

162
00:10:31,050 --> 00:10:33,730
>> Esence por ĉiu todo en tiu todos tabelo

163
00:10:33,730 --> 00:10:37,110
ne estas ero en la kompleta tabelo kiu esence indikas

164
00:10:37,110 --> 00:10:39,060
ĉu tio estas kompletaj aŭ ne.

165
00:10:39,060 --> 00:10:41,640
Mi devis fari belan minimuma ŝanĝoj al tiu kodo,

166
00:10:41,640 --> 00:10:44,470
tial jen nia addTodo funkcio.

167
00:10:44,470 --> 00:10:48,530
Rimarku, ke ĉi tie mi puŝas ĝin sur la tabelo,

168
00:10:48,530 --> 00:10:51,300
kaj poste mi pelante 0 al tiu kompleta tabelo,

169
00:10:51,300 --> 00:10:57,090
esence en paralela kun tiu nova todo puŝo diri

170
00:10:57,090 --> 00:11:00,430
Mi aldonas tiun eron, kaj ĝi estas kunigita kun tiu valoro,

171
00:11:00,430 --> 00:11:02,810
kio signifas ke ĝi estas nekompleta.

172
00:11:02,810 --> 00:11:04,970
Kaj poste mi redrawing la por-do list.

173
00:11:04,970 --> 00:11:09,220
Nun, rimarki Mi aldonis ĉi drawTodoList funkcio.

174
00:11:09,220 --> 00:11:11,760
Tio postulas multan de la kodo kiun ni havis antaŭ,

175
00:11:11,760 --> 00:11:15,320
esence liberigas el la skatolo kaj poste tiras la novaj to-do list.

176
00:11:15,320 --> 00:11:19,620
Sed rimarki, ke ene de ĉi por buklo ni faras iom pli nun.

177
00:11:19,620 --> 00:11:25,000
Ni esence kontrolanta ĉu la ero responda al la th,-a todo tie

178
00:11:25,000 --> 00:11:30,220
estas kompleta, kaj ni kondutas malsame en tiuj 2 cirkonstancoj.

179
00:11:30,220 --> 00:11:32,790
Se ĝi estas kompleta, ni aldonas ĉi del etikedo,

180
00:11:32,790 --> 00:11:35,360
kiu estas esence la vojo vi povas atingi tiun fendas efekto

181
00:11:35,360 --> 00:11:38,190
transirante el la to-do list se estas kompleta,

182
00:11:38,190 --> 00:11:42,200
kaj se ĝi ne estas, ni ne inkludante ĝin.

183
00:11:42,200 --> 00:11:45,030
Kaj por ke ia prizorgas tion,

184
00:11:45,030 --> 00:11:49,140
>> kaj tio estas unu maniero por atingi tion.

185
00:11:49,140 --> 00:11:53,420
Kaj tiam rimarkos kiam la uzanto clic unu el tiuj

186
00:11:53,420 --> 00:11:56,780
ni Baskuligi la finaĵon statuson de ĝi.

187
00:11:56,780 --> 00:12:02,170
Kiam la uzanto klakas, ni retroirigi ĉu ĝi estas kompletigis aŭ ne,

188
00:12:02,170 --> 00:12:04,540
kaj poste ni redesegni ĝin.

189
00:12:04,540 --> 00:12:06,190
Tiu speco de verkoj.

190
00:12:06,190 --> 00:12:09,860
Ni havas ĉi tiujn funkciojn kiuj portas siajn taskojn,

191
00:12:09,860 --> 00:12:11,730
kaj tio estas bone.

192
00:12:11,730 --> 00:12:14,110
Ĉu estas io ni povus pli bone fari pri tio, kvankam?

193
00:12:14,110 --> 00:12:18,700
Rimarku ni havas tiujn 2 tutmonda arrays.

194
00:12:18,700 --> 00:12:23,550
Se tiu estis C, kaj ni havis 2 arrays tian reprezentis

195
00:12:23,550 --> 00:12:25,800
datumoj kiuj estis ia rilatas iel

196
00:12:25,800 --> 00:12:30,140
kion ni uzas en C por kombini tiujn 2 kampoj

197
00:12:30,140 --> 00:12:35,420
en iu kiu encapsula ambaŭ pecoj de informo?

198
00:12:35,420 --> 00:12:37,600
Iu volas fari sugeston?

199
00:12:37,600 --> 00:12:39,450
[Studenta inaudibles respondon]

200
00:12:39,450 --> 00:12:42,340
>> Precize, do ni povus uzi ian struct,

201
00:12:42,340 --> 00:12:44,960
kaj se vi pensas reen al, ni diru, pset 3,

202
00:12:44,960 --> 00:12:47,350
Memoru ni havis vortaron, kaj tiam ni havis, ĉu la vorto

203
00:12:47,350 --> 00:12:50,230
estis en la vortaro, kaj cxio, kion informo estis kunmetita

204
00:12:50,230 --> 00:12:52,420
ene de kelkaj datumstrukturo.

205
00:12:52,420 --> 00:12:56,390
Unu aferon mi povas fari kun tiu kodo eviti havi tiujn 2 malsamaj arrays

206
00:12:56,390 --> 00:13:01,760
por similaj pecoj de informo estas mi povas kombini ilin en JavaScript objekto.

207
00:13:01,760 --> 00:13:07,150
Ni rigardu tion.

208
00:13:07,150 --> 00:13:11,740
Rimarku ke mi havas nur unu tabelo supre nun

209
00:13:11,740 --> 00:13:17,650
kaj kion mi faris estas-kaj ĉi tiu estas nur la JavaScript sintakson por ia

210
00:13:17,650 --> 00:13:21,350
kreante laŭvorta versio de objekto,

211
00:13:21,350 --> 00:13:24,670
kaj rimarkos estas 2 propraĵoj, do ni havas la todo,

212
00:13:24,670 --> 00:13:29,660
kaj ĝin subtenis kune kun ĉu ĝi estas kompletaj aŭ nekompletaj.

213
00:13:29,660 --> 00:13:31,000
Ĉi tio estas tre simila kodo.

214
00:13:31,000 --> 00:13:35,310
Ni uzas la JavaScript celoj.

215
00:13:35,310 --> 00:13:38,600
Tiu speco de plibonigas aĵoj.

216
00:13:38,600 --> 00:13:43,850
Kiel nun, ĉiuj ĉi tiuj kampoj de rilataj informoj estas tenis kune.

217
00:13:43,850 --> 00:13:46,410
Kiam ni iros por presi ĝin, ni povas konsenti la kampoj.

218
00:13:46,410 --> 00:13:49,060
>> Rimarku kiel ni faras todos [i]. Kompleta

219
00:13:49,060 --> 00:13:52,880
anstataŭ kontrolanta la kompleta tabelo izolite,

220
00:13:52,880 --> 00:13:56,560
kaj rimarkos, kiam ni volas akiri la al-do string ni atingi la por-do proprieto

221
00:13:56,560 --> 00:13:58,750
de tiu ĉiu, do tian havas sencon ĉar

222
00:13:58,750 --> 00:14:01,660
cxiu menuero havas tiujn apriora propraĵoj pri ĝi.

223
00:14:01,660 --> 00:14:05,650
Ĝi havas ĉiu, kaj ĝi havas ĉu ĝi estas kompletaj aŭ ne.

224
00:14:05,650 --> 00:14:11,540
Ne tro multajn ŝanĝojn tie funkcie, simple aldonis iujn pli al la kodo.

225
00:14:11,540 --> 00:14:13,430
Tiu estas plibonigo de iuj frontoj, ĉu ne?

226
00:14:13,430 --> 00:14:16,030
Mi volas diri, ni faktorita el la dezajno iom.

227
00:14:16,030 --> 00:14:20,350
Nun ni havas celojn esence encapsulan tiun datumoj.

228
00:14:20,350 --> 00:14:27,130
Ĉu estas io pli ni povus fari el ĉi tie en terminoj de JavaScript?

229
00:14:27,130 --> 00:14:31,810
Kiel rimarkas ke tiu kodo ĝuste ĉi tie

230
00:14:31,810 --> 00:14:34,760
por atingi la interna HTML de div

231
00:14:34,760 --> 00:14:40,520
Estas iom, mi supozas, longa.

232
00:14:40,520 --> 00:14:45,100
Ekzistas document.getElementByID ("ĉiuj"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Unu afero, kiun ni povus fari por tiu kodo aspektas iom pli amikaj

234
00:14:48,400 --> 00:14:51,450
do mi ne devus subteni movo maldekstra kaj dekstra, tien kaj reen,

235
00:14:51,450 --> 00:14:58,480
estas mi povus uzi biblioteko kiel jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Ni kontrolu Seminario 2,

237
00:15:02,710 --> 00:15:05,880
kaj ĉi tiu estas la sama kodo, sed ĝi estas farita kun jQuery.

238
00:15:05,880 --> 00:15:08,790
Vi ne rajtas esti tro familiara kun jQuery,

239
00:15:08,790 --> 00:15:11,510
sed nur scias ke jQuery estas speco de biblioteko por JavaScript

240
00:15:11,510 --> 00:15:15,910
ke faciligante fari aferojn kiel aliro individuaj elementoj de la DOM.

241
00:15:15,910 --> 00:15:21,280
Jen anstataŭ diri document.getElementByID ("ĉiuj"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Mi povas uzi la multe pli pura formo en jQuery,

243
00:15:25,210 --> 00:15:28,490
kio estas ĝuste uzi selectores.

244
00:15:28,490 --> 00:15:31,300
Kiel vi povas vidi, ĉi tiu kodo ne ricevas iom pli pura,

245
00:15:31,300 --> 00:15:35,770
tre simila funkcie, sed jen la ideo.

246
00:15:35,770 --> 00:15:37,980
Ni vidis paron de aĵoj ĝis nun,

247
00:15:37,980 --> 00:15:42,010
tial ni komencis kun nur krudan JavaScript efektivigo.

248
00:15:42,010 --> 00:15:45,370
Ni aldonis novajn funkciojn kaj montris kiel oni povas plibonigi ĝin per

249
00:15:45,370 --> 00:15:49,090
nur kion ni havas en JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Ĉu iu vidas ian malfacilaĵoj kun ĉi dezajno?

251
00:15:53,300 --> 00:16:01,090
Nome, mi supozas-aŭ ne nepre malfacilaĵoj sed diru

252
00:16:01,090 --> 00:16:04,830
ni ne faras por-do list projekto, kaj morgaŭ ni decidis

253
00:16:04,830 --> 00:16:10,320
ni volis fari nutraĵvendejo listo aŭ komerca listo projekto.

254
00:16:10,320 --> 00:16:14,150
Multaj el tiuj karakterizaĵoj estas tre similaj.

255
00:16:14,150 --> 00:16:19,080
Multaj de la aĵoj kiujn ni volas eliri de JavaScript estas tre komuna,

256
00:16:19,080 --> 00:16:23,820
kaj tio substrekas la bezonon por ia maniero de

257
00:16:23,820 --> 00:16:25,670
farante ĉi tiu pli facile fari.

258
00:16:25,670 --> 00:16:30,400
Mi devis konstrui ĉio ĉi HTML-aliro, ĉiuj ĉi DOM aliro,

259
00:16:30,400 --> 00:16:35,530
kiel mi iros al prezenti la por-do list kun tiu modelo.

260
00:16:35,530 --> 00:16:39,130
Kaj rimarkos mi respondecas pro la JavaScript developer

261
00:16:39,130 --> 00:16:42,890
por teni la HTML kaj JavaScript kiun mi havas en sync.

262
00:16:42,890 --> 00:16:48,040
Nenio aŭtomate ke JavaScript reprezento

263
00:16:48,040 --> 00:16:51,590
aŭ la por-do list get elpelus al HTML.

264
00:16:51,590 --> 00:16:54,000
Nenio deviga ke krom mi.

265
00:16:54,000 --> 00:16:56,880
Mi devis skribi la egaleco to-do list funkcio.

266
00:16:56,880 --> 00:17:01,650
Kaj tio ne povas esti-Mi volas diri, estas racie fari tion,

267
00:17:01,650 --> 00:17:03,670
sed ĝi povas esti teda kelkfoje.

268
00:17:03,670 --> 00:17:08,190
Se vi havas pli grandan projekton, kiu povus esti malfacila.

269
00:17:08,190 --> 00:17:10,720
>> Kadroj, unu el la celoj de kadroj

270
00:17:10,720 --> 00:17:14,060
estas faciligi tiun procezon kaj varo de faktoro ekster

271
00:17:14,060 --> 00:17:16,950
ĉi tiuj komunaj-Mi supozas ke vi povus diri-dezajno ŝablonoj

272
00:17:16,950 --> 00:17:20,700
ke homoj ĝenerale havas ia maniero reprezenti datumojn,

273
00:17:20,700 --> 00:17:25,599
ĉu tio estas amikoj listo, ĉu tio estas mapo informoj

274
00:17:25,599 --> 00:17:27,280
aŭ io aŭ to-do list.

275
00:17:27,280 --> 00:17:30,660
Kelkaj homoj havas ĝenerale maniero reprezenti informojn,

276
00:17:30,660 --> 00:17:33,650
kaj ili ĝenerale bezonas teni tiun informon ia sinkronigita

277
00:17:33,650 --> 00:17:36,520
inter kio la uzanto vidas en ia vido,

278
00:17:36,520 --> 00:17:39,850
parolante en terminoj de kiel la modelo view regilo kiun vi vidis en prelego,

279
00:17:39,850 --> 00:17:45,400
kaj tiam la modelo, kiu en ĉi tiu kazo estas tiu de JavaScript tabelo.

280
00:17:45,400 --> 00:17:49,020
Kadrojn al ni vojon por solvi tiun problemon.

281
00:17:49,020 --> 00:17:53,080
Nun ni rigardu la efektivigo de ĉi to-do list

282
00:17:53,080 --> 00:18:02,360
en kadro alvokis angularjs.

283
00:18:02,360 --> 00:18:04,650
Jen ĝi. Rimarku ĝi persvadas sur tobogano.

284
00:18:04,650 --> 00:18:07,330
Mi ne devas rulumi al la maldekstra kaj dekstra.

285
00:18:07,330 --> 00:18:10,460
Tio verŝajne ne estas granda kialo rekomendi uzante kadro,

286
00:18:10,460 --> 00:18:20,120
sed avizo mi iam aliri individuaj HTML elementoj tie?

287
00:18:20,120 --> 00:18:22,400
Ĉu mi iam eniri en la DOM?

288
00:18:22,400 --> 00:18:26,120
Ĉu vi vidas ian document.getElementByID aŭ io simila?

289
00:18:26,120 --> 00:18:29,870
Ne, tio estas for.

290
00:18:29,870 --> 00:18:35,590
>> Angula helpas nin subteni la DOM kaj nia JavaScript reprezento de io

291
00:18:35,590 --> 00:18:40,430
speco de sinkronigita, do se ĝi ne estas en la js-dosiero,

292
00:18:40,430 --> 00:18:46,790
se estas neniu vojo de programmatically alveni al ĉiuj, ke HTML-enhavon

293
00:18:46,790 --> 00:18:51,800
de la JavaScript kiel ni subtenas tiun sinkronigita?

294
00:18:51,800 --> 00:18:58,160
Se ĝi ne estas en la. Js-dosiero, ĝi estas alvenis al esti en HTML, ĉu ne?

295
00:18:58,160 --> 00:19:01,910
Tiu estas la nova versio de la HTML-dosiero,

296
00:19:01,910 --> 00:19:04,660
kaj rimarki ni aldonis multe ĉi tie.

297
00:19:04,660 --> 00:19:11,110
Rimarku ke estas tiuj novaj ecoj kiuj diras ng-klaku kaj ng-ripeto.

298
00:19:11,110 --> 00:19:15,650
Angula La alproksimiĝo al solvi ĉi tiu problemo de malfacilaĵoj en dezajno

299
00:19:15,650 --> 00:19:19,130
estas esence fari HTML multe pli potenca.

300
00:19:19,130 --> 00:19:24,420
Angula estas maniero de permesante fari HTML iom pli esprima.

301
00:19:24,420 --> 00:19:30,520
Ekzemple, mi povas diri ke mi iros por ligi aŭ ligos tiun tekston skatolo

302
00:19:30,520 --> 00:19:35,080
al variablo en mia Angula Javascript-kodo.

303
00:19:35,080 --> 00:19:37,030
Ĉi ng-modelo faras ĝuste tion.

304
00:19:37,030 --> 00:19:41,550
Kiu esence diras ke la elemento ene de tiu teksto skatolo,

305
00:19:41,550 --> 00:19:45,000
nur asocii ke kun la variablo new_todo_description

306
00:19:45,000 --> 00:19:47,870
ene de la Javascript-kodo.

307
00:19:47,870 --> 00:19:51,600
Tio estas tre potenca ĉar mi ne devas eksplicite iri al

308
00:19:51,600 --> 00:19:53,310
la DOM atingi tiun informon.

309
00:19:53,310 --> 00:19:56,250
Mi ne devas diri document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
Mi ne devas uzi jQueries kiel DOM aliron.

311
00:19:58,750 --> 00:20:03,280
Mi povas asocii ĝin kun ŝanĝiĝema, kaj poste, kiam mi ŝanĝas tiu variablo

312
00:20:03,280 --> 00:20:07,400
ene Javascript ĝi estas tenata en sync kun la HTML,

313
00:20:07,400 --> 00:20:11,640
por ke simpligas la procezo de devi iri tien kaj reen inter la du.

314
00:20:11,640 --> 00:20:18,260
Ĉu tio havas sencon?

315
00:20:18,260 --> 00:20:22,060
>> Kaj rimarki mankas HTML-kodo de aliro.

316
00:20:22,060 --> 00:20:27,760
Ni ĵus faris HTML pli potencaj,

317
00:20:27,760 --> 00:20:32,070
kaj nun, ekzemple, ni povas fari tion kiel oriento,

318
00:20:32,070 --> 00:20:38,610
kiel kiam vi klakos sur ĉi tio, nomas tiun funkcion en la kadro de todos.js,

319
00:20:38,610 --> 00:20:43,410
kaj ni povus fari tion antaŭe, sed estas aliaj aferoj, kiel ĉi ng-modelo,

320
00:20:43,410 --> 00:20:47,020
kaj rimarkas ĉi ng-ripeto.

321
00:20:47,020 --> 00:20:51,520
Kion vi pensas ĉi tio?

322
00:20:51,520 --> 00:20:54,390
Jen nia Neordigita listo de antaŭe.

323
00:20:54,390 --> 00:20:56,470
Ni havas la ul etikedoj,

324
00:20:56,470 --> 00:21:03,710
sed mi iam farante tiu listo ene de la kodo JavaScript?

325
00:21:03,710 --> 00:21:09,280
Mi neniam eksplicite repagantaj tiu listo.

326
00:21:09,280 --> 00:21:11,580
Kiel tio funkcias?

327
00:21:11,580 --> 00:21:16,410
Nu, la maniero Angula plenumas ĉi estas ĉi nomiĝas ripetilo.

328
00:21:16,410 --> 00:21:22,760
Esence tiu diras ke mi volas presi ĉi HTML

329
00:21:22,760 --> 00:21:26,240
por ĉiu todo ene de mia todos tabelo.

330
00:21:26,240 --> 00:21:31,850
Ene de todos.jr estas todos tabelo ĝuste ĉi tie,

331
00:21:31,850 --> 00:21:37,910
kaj ĉi diros Angula iras tra tiu tabelo, kaj por ĉiu ero vi vidas

332
00:21:37,910 --> 00:21:41,390
Mi volas ke vi presi ĉi HTML.

333
00:21:41,390 --> 00:21:44,620
Ĉi tiu estas speco de timinda ĉar mi povas nur fari tion

334
00:21:44,620 --> 00:21:47,760
sen devi skribi por ciklo,

335
00:21:47,760 --> 00:21:52,250
kiu por to-do list kiu estis nur 30 linioj de kodo

336
00:21:52,250 --> 00:21:54,700
eble ne estas la plej utila afero,

337
00:21:54,700 --> 00:22:01,240
sed se vi havas grandan projekton, tio povus akiri tre oportuna.

338
00:22:01,240 --> 00:22:06,100
>> Ĉi tio estas unu solvo al tiu problemo, farante HTML pli potencaj,

339
00:22:06,100 --> 00:22:10,820
kaj kiu nin permesas konservi JavaScript kaj HTML sinkronigita.

340
00:22:10,820 --> 00:22:13,220
Estas aliaj eblaj manieroj al solvi ĉi tiu problemo,

341
00:22:13,220 --> 00:22:15,320
kaj ne ĉiu kadro tion faras.

342
00:22:15,320 --> 00:22:17,720
Ne ĉiu kadro laboras kune ĉi tiuj linioj.

343
00:22:17,720 --> 00:22:19,490
Kelkaj kadroj havas diversajn alirojn,

344
00:22:19,490 --> 00:22:23,310
kaj eble vi trovos ke vi ĝuas kodigo en unu kadro super la alia.

345
00:22:23,310 --> 00:22:26,160
Ni rigardu unu pli.

346
00:22:26,160 --> 00:22:30,060
Ĉi tiu estas la to-do list koditaj en kadro alvokis Backbone.

347
00:22:30,060 --> 00:22:33,250
Mi tuj iros tra tiu rapide.

348
00:22:33,250 --> 00:22:38,300
Mi komencos per la HTML antaŭ ol ni iros tien.

349
00:22:38,300 --> 00:22:40,290
Unu sekundo.

350
00:22:40,290 --> 00:22:43,950
Komencante kun la HTML, kiel vi rimarkos, nia HTML estas tre simila

351
00:22:43,950 --> 00:22:50,000
al kio estis antaŭe, do ne tro da novaj sur tiu fronto.

352
00:22:50,000 --> 00:22:55,410
Sed nia js-dosiero estas iom malsamaj.

353
00:22:55,410 --> 00:23:00,360
Backbone ia havas tiun ideon, aŭ agas sur la ideo

354
00:23:00,360 --> 00:23:04,750
ke multaj kion ni faru pri, ekzemple, nia JavaScript projektoj

355
00:23:04,750 --> 00:23:09,110
Estas pensi modeloj kaj kolektoj de tiuj modeloj.

356
00:23:09,110 --> 00:23:12,510
Tio povus esti, ekzemple, foto kaj kolektoj de fotoj,

357
00:23:12,510 --> 00:23:16,230
aŭ la ideo de amiko kaj kolektoj de amikoj.

358
00:23:16,230 --> 00:23:20,700
Kaj ofte, kiam ni programado JavaScript aplikoj

359
00:23:20,700 --> 00:23:25,340
ni ordigi de reprezentas la ideon de havi kolekton de amikoj

360
00:23:25,340 --> 00:23:29,500
iel en JavaScript, kaj Backbone donas al ni tiu tavolo

361
00:23:29,500 --> 00:23:33,040
sur supro de JavaScript la ekzistantaj tabeloj kaj celoj

362
00:23:33,040 --> 00:23:38,300
fari pli potenca aĵoj kun kiuj pli facile.

363
00:23:38,300 --> 00:23:41,870
>> Ĉi tie mi difinis al-do modelo,

364
00:23:41,870 --> 00:23:44,630
kaj vi ne devas zorgi tro multe pri la sintakso,

365
00:23:44,630 --> 00:23:48,730
sed rimarki ke kio estas unu el la ecoj de tiu?

366
00:23:48,730 --> 00:23:53,190
Ĝi havas defaŭlta kampo.

367
00:23:53,190 --> 00:23:56,640
Backbone min permesas specifi jam ekstere de la batilo

368
00:23:56,640 --> 00:24:00,190
iu nova al-do, ke mi kreas tuj havos tiujn implicite.

369
00:24:00,190 --> 00:24:04,100
Nun mi povas personecigi ĉi, sed povante specifi la defaŭltoj

370
00:24:04,100 --> 00:24:07,220
estas agrabla, kaj ĝi estas speco de oportuna ĉar ĉi tio ne estas iu kiu estas kiel

371
00:24:07,220 --> 00:24:10,430
imanenta en JavaScript, kaj nun mi ne devas eksplicite

372
00:24:10,430 --> 00:24:12,430
diri ke la todos estas nekompleta.

373
00:24:12,430 --> 00:24:19,190
Mi povas diri rajton super la batilon kiun todos tuj estos markita kiel nekompleta.

374
00:24:19,190 --> 00:24:21,300
Rimarku tiam kio estas tio?

375
00:24:21,300 --> 00:24:25,520
Nun mi havas por-do listo, kaj tio estas kolekto.

376
00:24:25,520 --> 00:24:30,960
Rimarku la kampo asociita kun kiu diras modelo ĉiu.

377
00:24:30,960 --> 00:24:33,390
Jen mia maniero de rakonti Backbone ke

378
00:24:33,390 --> 00:24:37,350
Mi tuj pensi pri kolekto de tiuj individuaj todos.

379
00:24:37,350 --> 00:24:42,140
Tio estas esence la modelo strukturo por mia programo.

380
00:24:42,140 --> 00:24:44,980
Jen mi havas ideon de kolekto,

381
00:24:44,980 --> 00:24:48,960
kaj esence la artikoloj enhavitaj en tiu kolekto estas ĉiuj tuj estos tiuj todos,

382
00:24:48,960 --> 00:24:51,910
kaj kiu estas tre natura en tiu senco

383
00:24:51,910 --> 00:24:59,890
ĉar mi ja havas todos, kaj mi havas ilin en kolekto.

384
00:24:59,890 --> 00:25:02,940
>> Ni rigardu iom pli da ĉi tiu.

385
00:25:02,940 --> 00:25:05,900
Jen Backbone vido.

386
00:25:05,900 --> 00:25:08,890
La alia afero ke Backbone diras estas, ke

387
00:25:08,890 --> 00:25:14,660
amaso de la modeloj vi pensadas pri aŭ eĉ kolektoj

388
00:25:14,660 --> 00:25:19,150
tuj bezonas havi iun manieron de esti montrata.

389
00:25:19,150 --> 00:25:21,900
Ni bezonas por repagi, ke to-do list,

390
00:25:21,900 --> 00:25:25,460
kaj ĉu ne estus bone se ni povus havigi por ĉiu modelo

391
00:25:25,460 --> 00:25:28,390
aŭ asocias kun ĉiu modelo tiu vidpunkto

392
00:25:28,390 --> 00:25:34,020
kiu nin permesas mi supozas konekti la du kune?

393
00:25:34,020 --> 00:25:38,320
Dum antaŭ ol ni devis uzi por buklo kiu kuras tra

394
00:25:38,320 --> 00:25:41,130
ĉiun todo en nia listo kaj poste presas ĝin ĉi tie

395
00:25:41,130 --> 00:25:44,650
ni povas esence konekti ĝin kun ĉi tiu modelo.

396
00:25:44,650 --> 00:25:47,550
Tio estas por-do vido.

397
00:25:47,550 --> 00:25:50,550
Tiu estas asociita kun la todo ni trovis antaŭe.

398
00:25:50,550 --> 00:25:54,940
Nun ĉiu todo estas displayable aŭ renderable

399
00:25:54,940 --> 00:25:56,960
per ĉi to-do vido.

400
00:25:56,960 --> 00:25:59,440
Rimarku kelkaj el la kampoj.

401
00:25:59,440 --> 00:26:05,880
Kion vi pensas ĉi tagName estas, tagName: p?

402
00:26:05,880 --> 00:26:09,790
Memoru el antaux kiam ni volis Redonu todo

403
00:26:09,790 --> 00:26:16,700
ni devus eksplicite paro nia todos kun ĉi span etikedo.

404
00:26:16,700 --> 00:26:21,080
Nun ni diras ke kie ĉi todo tuj vivi

405
00:26:21,080 --> 00:26:25,250
tuj estos ene de span etikedo.

406
00:26:25,250 --> 00:26:31,440
Kaj nun ni ankaŭ asocii okazaĵoj kun niaj todos.

407
00:26:31,440 --> 00:26:34,320
>> Ĉiu todo havas ĉi tiu okazaĵo.

408
00:26:34,320 --> 00:26:38,480
Se vi klakas preskaux la ebligi butonon, jen kion mi diras tie,

409
00:26:38,480 --> 00:26:43,080
tiam esence marki la todo kiel la malo de kio estis antaŭe

410
00:26:43,080 --> 00:26:45,890
kaj tiam re-redonu la apliko.

411
00:26:45,890 --> 00:26:47,810
Ĉi tiu estas speco de simila al la kodo antaŭe.

412
00:26:47,810 --> 00:26:50,730
Memoru kiam ni markis ĝin kiel ĉu la malo aŭ-

413
00:26:50,730 --> 00:26:52,410
kaj poste ni re-sendadis ĝin.

414
00:26:52,410 --> 00:26:57,750
Sed nun rimarkas tiun okazaĵon kutimis esti iu kiu estis en la HTML.

415
00:26:57,750 --> 00:26:59,640
Ĝi sidis tie.

416
00:26:59,640 --> 00:27:01,410
La butono havis sur klako.

417
00:27:01,410 --> 00:27:05,310
Kiam vi klakas la butonon, ĝin speco de faras la uzatajxojn, por

418
00:27:05,310 --> 00:27:07,210
starigi ke todo esti nekompleta.

419
00:27:07,210 --> 00:27:11,180
Ĉi tie ni asocias ke evento de klakante ke ebligi butono

420
00:27:11,180 --> 00:27:15,830
kaj dorsflankanta ĉu ĝi estas sur aŭ for kun tiu vidpunkto.

421
00:27:15,830 --> 00:27:20,480
>> Tiu estas bela maniero starigi ĉi tiun okazaĵon por ke ĝi estas tre forte ligitaj

422
00:27:20,480 --> 00:27:26,980
ĉi tiu vidpunkto, kaj tiel rimarkos ĉi tiu pli.

423
00:27:26,980 --> 00:27:31,050
Mi havas ĉi render metodo, kaj ni ne devas iri tra la detalojn.

424
00:27:31,050 --> 00:27:33,650
Estas speco de simila al kio ni havis antaŭe,

425
00:27:33,650 --> 00:27:36,070
sed rimarkis mi ne looping tra nenion.

426
00:27:36,070 --> 00:27:40,700
Mi ne videbligi ke ul etikedo tio estas ia dirante Mi tuj presi ĉiuj de la elementoj.

427
00:27:40,700 --> 00:27:46,610
Mi provizanta la funkciojn por prunti ĉi tiu al-do elementon.

428
00:27:46,610 --> 00:27:49,400
Tio estas tre potenca koncepto ĉar esence

429
00:27:49,400 --> 00:27:53,600
nia to-do list konsistas de ĉiuj tiuj todos, kaj se ni povas esence specifi

430
00:27:53,600 --> 00:27:56,890
la vojo por repagi unu el tiuj todos

431
00:27:56,890 --> 00:28:04,230
tiam ni povas havi nian potencan spino per si redonu ĉiujn todos

432
00:28:04,230 --> 00:28:07,760
nomante la render metodo en la individua todos.

433
00:28:07,760 --> 00:28:14,180
Tiu estas koncepto kiu estas utila tie.

434
00:28:14,180 --> 00:28:18,160
Nun bona demando por demandi estas kiel estas tiu apliko esti kunmetita?

435
00:28:18,160 --> 00:28:21,200
Ĉar ni havas la kapablon por repagi unu todo,

436
00:28:21,200 --> 00:28:23,860
sed kiel ni atingos la ideo de multnombraj todos?

437
00:28:23,860 --> 00:28:25,100
>> Ni rigardu tion.

438
00:28:25,100 --> 00:28:27,100
Ĉi tiu estas la lasta parto.

439
00:28:27,100 --> 00:28:29,740
Rimarku ni havas to-do list view tie,

440
00:28:29,740 --> 00:28:34,440
kaj rimarki ĝi estas ankaŭ vidon.

441
00:28:34,440 --> 00:28:36,970
Kaj iri super kelkaj aferoj,

442
00:28:36,970 --> 00:28:45,280
ĉi pravalorizi metodo nomos kiam ni unue krei ĉi por-do list.

443
00:28:45,280 --> 00:28:52,630
Kiel vi povas vidi, estas kiel krei la to-do list kaj asociante ĝin kun ĉi tiu opinio.

444
00:28:52,630 --> 00:28:57,860
Kaj poste mi aldonis la funkcioj tie tiel esence kiam vi aldonas eron-

445
00:28:57,860 --> 00:29:01,440
ĉi tiu estas simila al la addItem metodo ni vidis antaŭ-

446
00:29:01,440 --> 00:29:07,430
Mi tuj krei novajn todo objekto, kaj rimarki ke mi reale nomante

447
00:29:07,430 --> 00:29:13,080
tiu nova todo metodo, do tiu estas provizita per Backbone,

448
00:29:13,080 --> 00:29:16,010
kaj mi povas pasi en miaj propraĵoj tie.

449
00:29:16,010 --> 00:29:23,710
Kaj nun ĉiu todo ke mi krei uzante ĉi akiros ke funkciojn, kiun ni vidis antaŭe.

450
00:29:23,710 --> 00:29:28,140
Rimarku Mi liberigante el la teksta kadro antaŭ-malgrandan iom detale-

451
00:29:28,140 --> 00:29:32,900
kaj tiam Mi aldonas tiun kolekton.

452
00:29:32,900 --> 00:29:37,630
>> Ĉi preskaŭ ŝajnas stranga ĉar antaŭ ni simple devis fari tion todos.push,

453
00:29:37,630 --> 00:29:43,310
kaj poste ni estis farita, kaj ĉi eble ŝajnas pli komplika por tiu ĉi aparta projekto,

454
00:29:43,310 --> 00:29:46,980
kaj eble vi trovos ke Backbone aŭ eĉ Angula aŭ ajna alia kadro

455
00:29:46,980 --> 00:29:50,790
ne konvenas al via aparta projekto, sed mi kredas ke estas grave pensi

456
00:29:50,790 --> 00:29:54,100
kion tio signifas en pli granda skalo por pli grandaj projektoj,

457
00:29:54,100 --> 00:29:56,610
ĉar se ni havis pli grandan projekton, kie ni estis reprezentantoj

458
00:29:56,610 --> 00:30:00,860
iuj vere kompleksa kolekto, io pli profunda ol nur to-do list,

459
00:30:00,860 --> 00:30:04,490
diru al amiko-listo aŭ ion similan, tiu povis veni en oportuna

460
00:30:04,490 --> 00:30:09,620
ĉar ni povus organizi niajn kodo en vere konvena maniero,

461
00:30:09,620 --> 00:30:12,550
en maniero kiu farus ĝin pli facila por iu alia

462
00:30:12,550 --> 00:30:16,820
kiu volis repreni projekto por konstrui sur.

463
00:30:16,820 --> 00:30:21,450
Vi povas vidi ke tiu havigas multajn strukturo.

464
00:30:21,450 --> 00:30:26,580
Kaj poste mi vokas repagi sur ĉi addItem.

465
00:30:26,580 --> 00:30:31,050
Redonu, kiel vi povas vidi, kaj vi ne devas kompreni tiun plenan sintakso,

466
00:30:31,050 --> 00:30:37,790
sed esence por ĉiu modelo tuj voki la individuo render metodo.

467
00:30:37,790 --> 00:30:41,500
Tio estas speco de kie ĉi tiu devenas.

468
00:30:41,500 --> 00:30:44,140
Ni simple specifas kiel por repagi la individuo todos,

469
00:30:44,140 --> 00:30:47,310
kaj poste ni glui ilin kune kiel tuto.

470
00:30:47,310 --> 00:30:49,810
Sed ĉi provizas manieron de abstraktado,

471
00:30:49,810 --> 00:30:55,470
ĉar mi povis ŝanĝi la manieron mi decidas por repagi la individuo todos,

472
00:30:55,470 --> 00:30:57,940
kaj mi ne devus ŝanĝi iun el ĉi tiu kodo.

473
00:30:57,940 --> 00:31:00,700
Tio estas speco de malvarmeta.

474
00:31:00,700 --> 00:31:08,540
>> Ĉu iu havas demandojn pri JavaScript kadroj?

475
00:31:08,540 --> 00:31:14,310
[Studenta inaudibles demando]

476
00:31:14,310 --> 00:31:16,050
Ho, certe, tiu estas granda demando.

477
00:31:16,050 --> 00:31:19,080
La demando estis kiamaniere mi inkluzivas la kadroj?

478
00:31:19,080 --> 00:31:22,970
Plej JavaScript kadroj estas esence nur js dosieroj

479
00:31:22,970 --> 00:31:25,740
ke vi povas inkludi ĉe la supro de via kodo.

480
00:31:25,740 --> 00:31:29,830
Rimarku en la kapo posedajxo de mia HTML Mi havas ĉiujn tiujn skripto etikedoj,

481
00:31:29,830 --> 00:31:34,250
kaj la fina skripto etikedo estas la kodo kiun ni skribis.

482
00:31:34,250 --> 00:31:38,820
Kaj tiam la 3 kadro kodoj estas ĝuste ankaŭ skripto etikedoj.

483
00:31:38,820 --> 00:31:42,110
Mi inkludante ilin el kio nomiĝas CDN,

484
00:31:42,110 --> 00:31:46,200
kiu min permesas akiri ĝin de iu alia en ĉi tiu punkto

485
00:31:46,200 --> 00:31:57,930
sed ĉiu kadro havas ĉi-vi povas sufiĉe multe trovi la enhavo

486
00:31:57,930 --> 00:32:03,540
por aparta JavaScript biblioteko disponebla en iuj CDN aŭ ion similan,

487
00:32:03,540 --> 00:32:05,570
kaj tiam vi povas inkludi tiujn skripto etikedoj.

488
00:32:05,570 --> 00:32:07,600
Ĉu tio havas sencon?

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

490
00:32:09,500 --> 00:32:11,730
>> Tiuj estas 2 malsamaj aliroj.

491
00:32:11,730 --> 00:32:14,640
Tiuj ne estas la solaj manieroj, proksimiĝoj al solvi ĉi tiu problemo.

492
00:32:14,640 --> 00:32:17,080
Estas multaj malsamaj aĵoj kiuj

493
00:32:17,080 --> 00:32:19,490
iu povis fari, kaj estas multaj kadroj tie.

494
00:32:19,490 --> 00:32:23,300
Angula kaj Backbone ne diras la tutan historion.

495
00:32:23,300 --> 00:32:26,370
Bonŝancon kun via fina projektoj, kaj dankas vin tre multe.

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