1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Семинар] [JavaScript Рамки: Зошто и Како]

2
00:00:02,000 --> 00:00:04,000
[Кевин Шмид] [Универзитетот Харвард]

3
00:00:04,000 --> 00:00:06,960
[Ова е CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Здраво, сите. Добредојдовте на вклучите Javascript-Рамки семинарот.

5
00:00:10,630 --> 00:00:14,910
Моето име е Кевин, а денес јас ќе одам да се зборува за вклучите Javascript-рамка,

6
00:00:14,910 --> 00:00:20,400
а целта на овој семинар е да не можеш да, да речеме, господар на одредена рамка по себе

7
00:00:20,400 --> 00:00:23,810
но да ви даде широк вовед во неколку рамки

8
00:00:23,810 --> 00:00:27,150
и да покаже зошто ние некогаш ќе сакате да го користите рамка.

9
00:00:27,150 --> 00:00:31,060
>> Пред да го направите тоа, јас ќе обезбеди малку позадина во JavaScript,

10
00:00:31,060 --> 00:00:33,750
а потоа ние ќе го земам од таму.

11
00:00:33,750 --> 00:00:36,270
Ние ќе треба да почне со спроведување на to-do листа.

12
00:00:36,270 --> 00:00:39,330
Тука е нашата задача листа за денес.

13
00:00:39,330 --> 00:00:41,990
Тоа е вид на смешно. Ние мора да се спроведе to-do листа во JavaScript.

14
00:00:41,990 --> 00:00:45,110
Тоа е она што се случува да изгледа, па тоа е нашата прва цел.

15
00:00:45,110 --> 00:00:47,160
Ние нема да се користи рамка за да го направите тоа.

16
00:00:47,160 --> 00:00:51,930
Ние ќе JavaScript код, и да добијат to-do листа да работат.

17
00:00:51,930 --> 00:00:54,370
Тогаш ние ќе треба да се подобри дизајнот, без користење на рамка.

18
00:00:54,370 --> 00:00:57,190
Ние ќе се дискутира на различни работи можеме да направиме со само го вклучите Javascript-сам

19
00:00:57,190 --> 00:01:00,650
да ја направиме нашата to-do листа малку повеќе добро дизајниран.

20
00:01:00,650 --> 00:01:02,490
Тогаш ние ќе треба да се фрли во некои jQuery,

21
00:01:02,490 --> 00:01:05,030
а потоа ние ќе треба да погледне во истата to-do листа,

22
00:01:05,030 --> 00:01:07,170
само имплементирани во различни рамки, и ние ќе разговараме

23
00:01:07,170 --> 00:01:09,280
 добрите и лошите страни на патот.

24
00:01:09,280 --> 00:01:12,040
>> Ајде да почнеме спроведување на таа to-do листа.

25
00:01:12,040 --> 00:01:14,270
Да речеме дека ние се дадени на овој HTML код.

26
00:01:14,270 --> 00:01:16,620
Одам да се направи ова малку помали.

27
00:01:16,620 --> 00:01:19,300
Како што можете да видите, имам малку насловот што вели Todo

28
00:01:19,300 --> 00:01:21,740
и малку кутија каде што можете да внесете опис на довршување

29
00:01:21,740 --> 00:01:26,990
а потоа се додава нова точка копче, па ајде пробајте да внесете нова довршување на оваа листа.

30
00:01:26,990 --> 00:01:31,000
Испрати го вклучите Javascript-рамка семинар,

31
00:01:31,000 --> 00:01:33,090
и јас сум да ја погоди нова точка.

32
00:01:33,090 --> 00:01:35,730
Јас го добивате ова алармирање JavaScript за кои вели спроведување мене.

33
00:01:35,730 --> 00:01:37,560
Ние мора да се имплементира.

34
00:01:37,560 --> 00:01:41,490
Ајде проверете го кодот за ова, и HTML и JavaScript.

35
00:01:41,490 --> 00:01:43,260
Тука е нашата HTML.

36
00:01:43,260 --> 00:01:45,500
Како што можете да ја видите тука, тука е нашата мала Todos заглавието.

37
00:01:45,500 --> 00:01:47,620
Тоа беше тоа храбар нешто на врвот,

38
00:01:47,620 --> 00:01:50,690
и потоа имаме влез кутија со случаеви,

39
00:01:50,690 --> 00:01:59,460
и потоа, тука е одреден атрибут на ова копче кој повикува оваа функција addTodo.

40
00:01:59,460 --> 00:02:05,460
Дали некој сакате да се погоди она што на клик е означувајќи?

41
00:02:05,460 --> 00:02:07,390
[Студентите нечујни одговор]

42
00:02:07,390 --> 00:02:09,289
Добро, за клик е вид на како настан,

43
00:02:09,289 --> 00:02:12,120
како кликнување на глувчето е само еден настан, и она што го правиме

44
00:02:12,120 --> 00:02:16,890
е ние сме врзување случај на кликнување на ова копче за да го изврши таа функција.

45
00:02:16,890 --> 00:02:21,700
AddTodo е овој настан управувачот за кликање дека копче.

46
00:02:21,700 --> 00:02:25,010
>> Како што можете да видите, кога ќе кликнете на нова содржина копчето

47
00:02:25,010 --> 00:02:29,940
на on кликнете настан добива отпуштен, и оваа функција добива се нарекува.

48
00:02:29,940 --> 00:02:33,170
Ајде да погледнеме во функција.

49
00:02:33,170 --> 00:02:36,260
Како што можете да видите, овде е мојата JavaScript код досега.

50
00:02:36,260 --> 00:02:41,280
Она што го имам на врвот е глобална структура на податоци за мојот to-do листа.

51
00:02:41,280 --> 00:02:44,060
Тоа изгледа како низа. Тоа е само празна низа.

52
00:02:44,060 --> 00:02:47,100
А потоа имам addTodo функција што сме го виделе порано,

53
00:02:47,100 --> 00:02:50,740
и само линија код во таму е ова алармирање.

54
00:02:50,740 --> 00:02:55,730
Тоа предупредува спроведување мене, а потоа имам 2 задачите во рака.

55
00:02:55,730 --> 00:02:58,790
Морам да додадете довршување на таа глобална структура на податоци,

56
00:02:58,790 --> 00:03:01,860
и тогаш сакам да го извлече to-do листа.

57
00:03:01,860 --> 00:03:06,360
Ништо не е премногу фенси само уште, но го вклучите Javascript-може да биде запознаен со,

58
00:03:06,360 --> 00:03:12,370
па ќе одам да се движи бавно и преглед на основите на JavaScript на тој начин.

59
00:03:12,370 --> 00:03:15,490
>> Ајде да им даде на овој шут.

60
00:03:15,490 --> 00:03:21,130
Да речеме, на корисникот ќе влезе нешто во ова поле.

61
00:03:21,130 --> 00:03:23,360
Јас само ја внеле нешто овде, текст.

62
00:03:23,360 --> 00:03:27,620
Како можам да се најде на пристап дека текстот преку JavaScript?

63
00:03:27,620 --> 00:03:32,500
Се сеќавам дека го вклучите Javascript-, една од неговите основни карактеристики е дека тоа ни дава

64
00:03:32,500 --> 00:03:34,670
овој програмски пристап до ДОМ.

65
00:03:34,670 --> 00:03:40,670
Таа ни овозможува да пристапите елементи и нивни својства на оваа вистинската HTML.

66
00:03:40,670 --> 00:03:43,430
Начинот на кој ние го правам тоа со голи коски вклучите Javascript-

67
00:03:43,430 --> 00:03:51,360
е ние, всушност, се користи некоја функција во вклучите Javascript-се нарекува getElementByID.

68
00:03:51,360 --> 00:03:55,140
Сакам да ја зачувате текстот што е напишан таму во некои променлива,

69
00:03:55,140 --> 00:03:58,350
па ќе одам да се каже нова променлива наречена new_todo,

70
00:03:58,350 --> 00:04:01,980
и јас одам да се добие тој елемент.

71
00:04:01,980 --> 00:04:06,330
Ова е функција,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
И сега јас сум добивање на елемент од страна на проект, па ми треба проект на тоа поле за текст,

73
00:04:11,580 --> 00:04:15,860
па јас сум го дал на проект new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Тоа е како јас одам да се добие елемент.

75
00:04:18,399 --> 00:04:23,880
Тоа е мојот аргумент на оваа функција, да се наведе кој проект да се добие.

76
00:04:23,880 --> 00:04:28,110
И така тоа е еден елемент во HTML, и има својства.

77
00:04:28,110 --> 00:04:30,650
Сте виделе овие. Тие се атрибути.

78
00:04:30,650 --> 00:04:37,090
Атрибутот на текстот елемент кој ги зачувува влез на корисникот е наречен вредност.

79
00:04:37,090 --> 00:04:40,860
Чував вредноста на тој текст кутија сега во оваа променлива наречена new_todo.

80
00:04:40,860 --> 00:04:45,040
Сега имам програмски пристап до оваа променлива, што е вид на ладно

81
00:04:45,040 --> 00:04:49,200
бидејќи сега она што можам да направите е да можам да го додадете во мојата to-do листа.

82
00:04:49,200 --> 00:04:52,870
>> Начинот на кој ние би го направил тоа во вклучите Javascript-и не грижете се ако не сте запознаени со ова,

83
00:04:52,870 --> 00:04:57,010
но само одат преку неа е todos.push

84
00:04:57,010 --> 00:05:00,130
затоа што тоа е името на мојата глобалната структура на податоци до тука,

85
00:05:00,130 --> 00:05:04,450
и јас одам да им помогнам на new_todo.

86
00:05:04,450 --> 00:05:09,120
Ова е голема, бидејќи сега имам тоа додаден во мојата вклучите Javascript-

87
00:05:09,120 --> 00:05:11,280
застапеност на кои to-do листа.

88
00:05:11,280 --> 00:05:15,170
Но сега како можам да го добие назад на HTML?

89
00:05:15,170 --> 00:05:18,560
Морам да се најде начин да се најде на турнете го назад.

90
00:05:18,560 --> 00:05:21,830
Со други зборови, јас вид на мора да се подготви ова.

91
00:05:21,830 --> 00:05:26,060
Она што ние ќе треба да направите е ние ќе треба да се подготви на to-do листа.

92
00:05:26,060 --> 00:05:29,270
Јас треба да се ажурира други HTML на таа страница,

93
00:05:29,270 --> 00:05:32,040
и како што можете да видите, јас го напуштив оваа мала сад тука,

94
00:05:32,040 --> 00:05:36,840
овој делител на страница чиј проект е Todos,

95
00:05:36,840 --> 00:05:40,870
и јас одам да се стави на to-do листа таму.

96
00:05:40,870 --> 00:05:47,240
Прво, ќе одам да го исчистите од, бидејќи, да речеме, имаше еден стар to-do листа таму.

97
00:05:47,240 --> 00:05:49,560
Јас сум добивање на тој елемент од проект повторно,

98
00:05:49,560 --> 00:05:54,530
и јас сум пристапуваат на внатрешниот HTML на тој елемент,

99
00:05:54,530 --> 00:05:58,010
и јас одам да се расчисти тоа.

100
00:05:58,010 --> 00:06:05,510
Ако го напуштивме овој код како што е, ние би видите празни ништо таму,

101
00:06:05,510 --> 00:06:10,410
и сега сакам да започне рендерирање мојот нов to-do листа.

102
00:06:10,410 --> 00:06:12,870
Јас сум во основа ќе ги избрише од мојот to-do листа.

103
00:06:12,870 --> 00:06:18,180
>> Сега внатрешниот HTML внатре во тоа Todos div е сосема јасна,

104
00:06:18,180 --> 00:06:20,060
и сега јас треба да започне додавајќи мојата листа.

105
00:06:20,060 --> 00:06:23,890
Првото нешто што сакате да го додадете назад е неподреден список ознака,

106
00:06:23,890 --> 00:06:33,890
што во основа означува дека ова е почеток на неподреден список.

107
00:06:33,890 --> 00:06:39,770
Сега за секој елемент во мојата Todos низа Сакам да го испечатите внатрешноста на кои HTML.

108
00:06:39,770 --> 00:06:43,710
Сакам да ја додадете на до дното на оваа листа.

109
00:06:43,710 --> 00:06:49,040
Исто како и во C, можам да го користите за телефонска линија, а јас ќе одам да започне во почетокот на мојата листа

110
00:06:49,040 --> 00:06:54,140
на елемент 0, а јас ќе одам да одат сите на патот на должината на листата.

111
00:06:54,140 --> 00:07:01,100
Ние всушност може да се добие на должината на низата во JavaScript користење на должината имот.

112
00:07:01,100 --> 00:07:03,420
Во суштина јас ќе одам да направите нешто многу слично внатрешноста на тука

113
00:07:03,420 --> 00:07:05,600
за печатење на тој елемент.

114
00:07:05,600 --> 00:07:12,970
Јас повторно да пристапите на Todos div, внатрешниот HTML сопственост на тоа,

115
00:07:12,970 --> 00:07:17,560
и јас одам да го додадете на овој нов елемент во листата, и дека се случува да биде опкружен со

116
00:07:17,560 --> 00:07:25,390
овој таг Ли, и јас одам да concatenate со + оператор,

117
00:07:25,390 --> 00:07:28,040
и тоа е ith елемент на мојот Todos низа,

118
00:07:28,040 --> 00:07:32,380
а потоа јас ќе одам да се затвори таа ознака.

119
00:07:32,380 --> 00:07:36,240
Сега за секој елемент ние ќе додадете нова листа влез.

120
00:07:36,240 --> 00:07:48,700
И тогаш сите ние навистина треба да направите е да затворам дека таг.

121
00:07:48,700 --> 00:07:52,820
Јас само треба да се затвори што неподреден список таг.

122
00:07:52,820 --> 00:07:55,490
>> Дали ви се добие чувство за како тоа функционира?

123
00:07:55,490 --> 00:07:57,700
Ова го отвора целата листа.

124
00:07:57,700 --> 00:08:01,080
Ова додава поединечни елементи од Todos листа на листата,

125
00:08:01,080 --> 00:08:05,470
а потоа дека затвора целата листа, и ова е мојот addTodo функција.

126
00:08:05,470 --> 00:08:09,590
Јас во основа да започне со добивање на довршување од полето за текст.

127
00:08:09,590 --> 00:08:18,950
Јас додаваат дека на Todos низа, а потоа јас повторно ја даде на to-do листа.

128
00:08:18,950 --> 00:08:21,520
Сега можам да додадете елементи на мојата листа.

129
00:08:21,520 --> 00:08:24,620
Ова е вид на возбудлив, бидејќи во само неколку линии на код

130
00:08:24,620 --> 00:08:28,240
ние сме во основа направени на to-do листа, каде што можеме да додадете објекти.

131
00:08:28,240 --> 00:08:30,050
Одлично.

132
00:08:30,050 --> 00:08:34,480
Тоа е вид на основен вовед во вклучите Javascript-.

133
00:08:34,480 --> 00:08:36,179
Не грижете се премногу за синтаксата за сега,

134
00:08:36,179 --> 00:08:38,130
но се размислува за ова концептуално.

135
00:08:38,130 --> 00:08:40,539
Имавме некои HTML.

136
00:08:40,539 --> 00:08:45,310
Имавме полето за текст на страница, која во основа е дозволено на корисниците да внесувате to-do елемент, за да ја додадете.

137
00:08:45,310 --> 00:08:49,210
А потоа ние се користи JavaScript за да пренесам дека довршување од тој текст полето.

138
00:08:49,210 --> 00:08:52,830
Ние чуваат дека во внатрешноста на низа го вклучите Javascript-, кој е во основа како

139
00:08:52,830 --> 00:08:56,010
нашите програмски застапеност на кои to-do листа,

140
00:08:56,010 --> 00:08:59,060
и тогаш ние го испечати.

141
00:08:59,060 --> 00:09:02,690
Ова е todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Ова е вид на ладно, но како можеме да ја искористам оваа понатаму?

143
00:09:07,620 --> 00:09:11,350
Добро, како што можете да видите, ова не е како комплетен to-do листа.

144
00:09:11,350 --> 00:09:15,100
На пример, не можам да се одбележи некој од овие елементи како неуредна,

145
00:09:15,100 --> 00:09:19,920
како ако сакав да ги реприоретизираат предмети или избришете ставки.

146
00:09:19,920 --> 00:09:23,150
Ова е во ред, но можеме да ја искористам оваа понатаму.

147
00:09:23,150 --> 00:09:29,280
Јас не одам да се зборува премногу за додавање на дополнителни функции,

148
00:09:29,280 --> 00:09:32,800
но ние би можеле да се земе дека понатаму.

149
00:09:32,800 --> 00:09:35,970
Ајде да зборуваме за додавање на уште една карактеристика на оваа to-do листа,

150
00:09:35,970 --> 00:09:40,370
кој се случува да се биде во можност да се провери на поединецот to-do содржина

151
00:09:40,370 --> 00:09:44,780
и таа да биде прецртан, значи, во основа велејќи дека јас го направив тоа.

152
00:09:44,780 --> 00:09:50,240
Да ги погледнеме некои код кој може да се постигне тоа.

153
00:09:50,240 --> 00:09:52,740
Забележи она што го направив, на врвот е додадов

154
00:09:52,740 --> 00:09:57,620
нова глобална низа наречен завршена.

155
00:09:57,620 --> 00:10:02,890
Јас сум во основа со користење на овој за да ја запази дали точките на to-do листа

156
00:10:02,890 --> 00:10:06,560
се комплетни или не.

157
00:10:06,560 --> 00:10:08,470
Ова е еден начин да го направите тоа.

158
00:10:08,470 --> 00:10:13,750
Ако гледам во спроведувањето на овој, на екранот,

159
00:10:13,750 --> 00:10:21,120
во основа, ако јас внесете довршување и го притискам ова вклучите копчето

160
00:10:21,120 --> 00:10:25,040
тој преминува надвор, па секоја ставка на оваа листа има или целосна

161
00:10:25,040 --> 00:10:31,050
или нецелосни држава, и јас сум со користење на друг низа да се претставуваат дека.

162
00:10:31,050 --> 00:10:33,730
>> Основа за секој довршување во таа Todos низа

163
00:10:33,730 --> 00:10:37,110
има една ставка во комплетен спектар, која во основа покажува

164
00:10:37,110 --> 00:10:39,060
без разлика дали тоа е завршена или не.

165
00:10:39,060 --> 00:10:41,640
Јас сум имал да се направи прилично минимална промени на овој законик,

166
00:10:41,640 --> 00:10:44,470
па тука е нашата addTodo функција.

167
00:10:44,470 --> 00:10:48,530
Забележите дека овде сум го туркав излез на низа,

168
00:10:48,530 --> 00:10:51,300
и тогаш јас сум притискање на 0 до кои комплетно низа,

169
00:10:51,300 --> 00:10:57,090
во основа паралелно со таа нова довршување натера да каже

170
00:10:57,090 --> 00:11:00,430
Јас сум додавајќи оваа точка, и тоа е во комбинација со оваа вредност,

171
00:11:00,430 --> 00:11:02,810
што значи дека тоа е нецелосен.

172
00:11:02,810 --> 00:11:04,970
И тогаш јас сум прецртуваат на to-do листа.

173
00:11:04,970 --> 00:11:09,220
Сега, забележиш јас додадов оваа drawTodoList функција.

174
00:11:09,220 --> 00:11:11,760
Ова се многу од кодот имавме порано,

175
00:11:11,760 --> 00:11:15,320
во основа го поплочува од кутијата, а потоа привлекува нови to-do листа.

176
00:11:15,320 --> 00:11:19,620
Но забележите дека внатрешноста на овој за јамка ние сме прави малку повеќе сега.

177
00:11:19,620 --> 00:11:25,000
Ние сме во основа проверка дали ставка што одговара на ith довршување овде

178
00:11:25,000 --> 00:11:30,220
е завршена, а ние се однесуваат различно во овие 2 околности.

179
00:11:30,220 --> 00:11:32,790
Ако тоа е завршена, ние сме додавање на оваа ознака Дел,

180
00:11:32,790 --> 00:11:35,360
која е основа на начинот на кој можете да добиете дека штрајкот преку ефектот

181
00:11:35,360 --> 00:11:38,190
премин надвор на to-do листа, ако тоа е комплетна,

182
00:11:38,190 --> 00:11:42,200
и ако тоа не е, ние не сме тоа, вклучувајќи и.

183
00:11:42,200 --> 00:11:45,030
И така тој вид на се грижи за тоа,

184
00:11:45,030 --> 00:11:49,140
>> и тоа е еден начин да се оствари ова.

185
00:11:49,140 --> 00:11:53,420
А потоа забележите кога корисникот ќе кликне на еден од овие

186
00:11:53,420 --> 00:11:56,780
ние промена на проектот статус од неа.

187
00:11:56,780 --> 00:12:02,170
Кога корисникот ќе кликне, ние ќе се јават без разлика дали е завршена или не,

188
00:12:02,170 --> 00:12:04,540
а потоа ние ќе го прецрта.

189
00:12:04,540 --> 00:12:06,190
Овој вид на работи.

190
00:12:06,190 --> 00:12:09,860
Имаме овие функции кои ги извршуваат своите сопствени задачи,

191
00:12:09,860 --> 00:12:11,730
и ова е во ред.

192
00:12:11,730 --> 00:12:14,110
Дали има нешто што можеме да направиме подобро за ова, иако?

193
00:12:14,110 --> 00:12:18,700
Забележете ги имаме овие 2 глобалниот постројки.

194
00:12:18,700 --> 00:12:23,550
Ако ова беше C, и имавме 2 низи тој вид на претставен

195
00:12:23,550 --> 00:12:25,800
податоци, која беше вид на поврзани на некој начин

196
00:12:25,800 --> 00:12:30,140
она што ние би го користите во C да се комбинираат овие 2 области

197
00:12:30,140 --> 00:12:35,420
во нешто што encapsulates двете парчиња на информации?

198
00:12:35,420 --> 00:12:37,600
Секој сакате да се направи предлог?

199
00:12:37,600 --> 00:12:39,450
[Студентите нечујни одговор]

200
00:12:39,450 --> 00:12:42,340
>> Точно, па ние би можеле да користат некој вид на struct,

201
00:12:42,340 --> 00:12:44,960
и ако мислите назад, да речеме, pset 3,

202
00:12:44,960 --> 00:12:47,350
се сеќавам имавме речник, а потоа моравме дали зборот

203
00:12:47,350 --> 00:12:50,230
беше во речникот, а сите тие информации беше ставен заедно

204
00:12:50,230 --> 00:12:52,420
во внатрешноста на некои податоци структура.

205
00:12:52,420 --> 00:12:56,390
Едно нешто можам да направам со овој код за да се избегне да се има овие 2 различни низи

206
00:12:56,390 --> 00:13:01,760
за слични парчиња на информации е можам да ги комбинираат во објектот вклучите Javascript-.

207
00:13:01,760 --> 00:13:07,150
Ајде да ги разгледаме во тоа.

208
00:13:07,150 --> 00:13:11,740
Забележиш јас имаат само една низа на врвот сега

209
00:13:11,740 --> 00:13:17,650
и она што го направив е и ова е само вклучите Javascript синтакса за вид на

210
00:13:17,650 --> 00:13:21,350
создавање на буквална верзија на објектот,

211
00:13:21,350 --> 00:13:24,670
и ќе забележите постојат 2 својства, па ние имаме довршување,

212
00:13:24,670 --> 00:13:29,660
и тоа е се чуваат заедно со дали тоа е целосна или нецелосни.

213
00:13:29,660 --> 00:13:31,000
Ова е многу слично код.

214
00:13:31,000 --> 00:13:35,310
Ние сме со користење на JavaScript објекти.

215
00:13:35,310 --> 00:13:38,600
Овој вид на подобрува работи.

216
00:13:38,600 --> 00:13:43,850
Како сега, сите овие полиња на поврзани информации се чуваат заедно.

217
00:13:43,850 --> 00:13:46,410
Кога одиме да го испечатите, ние може да пристапите до полиња.

218
00:13:46,410 --> 00:13:49,060
>> Забележи како што го правиме Todos [i]. Комплетни

219
00:13:49,060 --> 00:13:52,880
Наместо проверка на комплетен спектар одделно,

220
00:13:52,880 --> 00:13:56,560
и ќе забележите кога ќе сакате да го добиете to-do низа ние сме добивање на to-do сопственост

221
00:13:56,560 --> 00:13:58,750
на тоа довршување, па овој вид на прави смисла, бидејќи

222
00:13:58,750 --> 00:14:01,660
секој елемент има овие суштински својства за тоа.

223
00:14:01,660 --> 00:14:05,650
Таа има за довршување, а тоа е дали тоа е завршена или не.

224
00:14:05,650 --> 00:14:11,540
Не премногу промени има функционално, само додаде уште некои на кодот.

225
00:14:11,540 --> 00:14:13,430
Ова е подобрување на некои фронтови, нели?

226
00:14:13,430 --> 00:14:16,030
Мислам, ние констатирано и од дизајнот малку.

227
00:14:16,030 --> 00:14:20,350
Сега имаме објекти за да во основа капсулирало овие податоци.

228
00:14:20,350 --> 00:14:27,130
Дали има нешто повеќе можеме да направиме од тука, во смисла на JavaScript?

229
00:14:27,130 --> 00:14:31,810
Како најава дека овој код токму тука

230
00:14:31,810 --> 00:14:34,760
за добивање на внатрешниот HTML кодот на div

231
00:14:34,760 --> 00:14:40,520
е малку, претпоставувам, долго.

232
00:14:40,520 --> 00:14:45,100
Има document.getElementByID ("Todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Едно нешто што може да направите за да се направи овој код се погледне малку поповолна

234
00:14:48,400 --> 00:14:51,450
па јас не ќе мора да се задржи лизгање лево и десно, напред и назад,

235
00:14:51,450 --> 00:14:58,480
е јас да го користите библиотека како jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Ајде проверете Семинар 2,

237
00:15:02,710 --> 00:15:05,880
и ова е истиот код, но тоа е направено со jQuery.

238
00:15:05,880 --> 00:15:08,790
Можете може да не биде премногу запознаен со jQuery,

239
00:15:08,790 --> 00:15:11,510
но само знам дека jQuery е еден вид на библиотека за JavaScript

240
00:15:11,510 --> 00:15:15,910
што го прави полесно да се прават работите како пристап одделните елементи на ДОМ.

241
00:15:15,910 --> 00:15:21,280
Тука наместо да се каже document.getElementByID ("Todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Може ли да користам многу почисти начин на jQuery,

243
00:15:25,210 --> 00:15:28,490
што е само за употреба селектори.

244
00:15:28,490 --> 00:15:31,300
Како што можете да видите, овој код се добие малку почиста,

245
00:15:31,300 --> 00:15:35,770
многу слични функционално, но тоа е идејата.

246
00:15:35,770 --> 00:15:37,980
Видовме неколку работи досега,

247
00:15:37,980 --> 00:15:42,010
па почнавме со само сурови JavaScript имплементација.

248
00:15:42,010 --> 00:15:45,370
Додадовме нови опции и покажа како можеме да ја подобриме со

249
00:15:45,370 --> 00:15:49,090
само она што го имаме во JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Дали некој се види било тешкотии со овој дизајн?

251
00:15:53,300 --> 00:16:01,090
Имено, претпоставувам-или не мора да значи тешкотии, но ајде да речеме

252
00:16:01,090 --> 00:16:04,830
ние не се прави to-do листа проект, и утре решивме

253
00:16:04,830 --> 00:16:10,320
сакавме да се направи намирници листа или шопинг листа проект.

254
00:16:10,320 --> 00:16:14,150
Многу од овие карактеристики се многу слични.

255
00:16:14,150 --> 00:16:19,080
Многу од работите што сакате да се излезе од вклучите Javascript-се многу чести,

256
00:16:19,080 --> 00:16:23,820
и ова ја нагласува потребата за некој вид на начин на

257
00:16:23,820 --> 00:16:25,670
правејќи го овој полесно да се направи.

258
00:16:25,670 --> 00:16:30,400
Морав да се изгради до сите на овој HTML пристап, сето ова пристап ДОМ,

259
00:16:30,400 --> 00:16:35,530
како јас ќе одам да ги претставуваат to-do листа со овој модел.

260
00:16:35,530 --> 00:16:39,130
И ќе забележите јас сум одговорен како развивач го вклучите Javascript-

261
00:16:39,130 --> 00:16:42,890
за чување на HTML и JavaScript дека имам во синхронизација.

262
00:16:42,890 --> 00:16:48,040
Ништо автоматски се дека го вклучите Javascript-застапеност

263
00:16:48,040 --> 00:16:51,590
или to-do листа се турка надвор во HTML.

264
00:16:51,590 --> 00:16:54,000
Ништо не спроведува дека освен за мене.

265
00:16:54,000 --> 00:16:56,880
Морав да напишам нерешено to-do листа функција.

266
00:16:56,880 --> 00:17:01,650
И дека не може да биде-Мислам, тоа е разумно да го направат тоа,

267
00:17:01,650 --> 00:17:03,670
но тоа може да се досадни понекогаш.

268
00:17:03,670 --> 00:17:08,190
Ако имате поголем проект, кои би можеле да биде тешко.

269
00:17:08,190 --> 00:17:10,720
>> Рамки, една од целите на рамки

270
00:17:10,720 --> 00:17:14,060
е да се поедностави овој процес и вид на фактор на

271
00:17:14,060 --> 00:17:16,950
овие општи-Претпоставувам дека може да се каже-шеми на дизајн

272
00:17:16,950 --> 00:17:20,700
дека луѓето обично имаат некој вид на начин на претставување на податоци,

273
00:17:20,700 --> 00:17:25,599
дали тоа е листа на пријатели, без разлика дали тоа е информација за мапата

274
00:17:25,599 --> 00:17:27,280
или нешто или на to-do листа.

275
00:17:27,280 --> 00:17:30,660
Некои луѓе имаат генерално начин на претставување на информации,

276
00:17:30,660 --> 00:17:33,650
и тие генерално треба да се задржи таа информација вид на во синхронизација

277
00:17:33,650 --> 00:17:36,520
помеѓу она што корисникот го гледа во некој вид на гледање,

278
00:17:36,520 --> 00:17:39,850
говорејќи во однос на како модел погледнете контролорот што го виде во предавање,

279
00:17:39,850 --> 00:17:45,400
а потоа модел, кој во овој случај е оваа низа го вклучите Javascript-.

280
00:17:45,400 --> 00:17:49,020
Рамки ни даде начин да се реши тој проблем.

281
00:17:49,020 --> 00:17:53,080
Сега ајде да ги разгледаме во спроведувањето на овој to-do листа

282
00:17:53,080 --> 00:18:02,360
во рамка наречена angularjs.

283
00:18:02,360 --> 00:18:04,650
Тоа е тоа. Забележите тоа се вклопува на слајд.

284
00:18:04,650 --> 00:18:07,330
Јас не мора да дојдете до лево и десно.

285
00:18:07,330 --> 00:18:10,460
Тоа веројатно не е голема причина да се препорача користење на рамка,

286
00:18:10,460 --> 00:18:20,120
но известување сум јас некогаш пристап до индивидуални HTML елементи тука?

287
00:18:20,120 --> 00:18:22,400
Сум јас некогаш одат во ДОМ?

288
00:18:22,400 --> 00:18:26,120
Гледате ли било document.getElementByID или нешто слично?

289
00:18:26,120 --> 00:18:29,870
Не, тоа е нема.

290
00:18:29,870 --> 00:18:35,590
>> Аголна ни помага да се задржи на ДОМ и нашата JavaScript застапеност на нешто

291
00:18:35,590 --> 00:18:40,430
вид на во синхронизација, па ако тоа не е во датотеката ЈС,

292
00:18:40,430 --> 00:18:46,790
ако не постои начин на програмски добивање на сите дека HTML содржина

293
00:18:46,790 --> 00:18:51,800
од JavaScript колку сме ние имајќи го ова во синхронизирана?

294
00:18:51,800 --> 00:18:58,160
Ако тоа не е во. Js фајл, тоа е мора да биде во HTML, нели?

295
00:18:58,160 --> 00:19:01,910
Ова е нова верзија на HTML датотека,

296
00:19:01,910 --> 00:19:04,660
и ќе забележите додадовме многу тука.

297
00:19:04,660 --> 00:19:11,110
Забележите има овие нови атрибути кои велат нг-клик и нг-повторуваат.

298
00:19:11,110 --> 00:19:15,650
Аголна на пристап кон решавање на овој проблем на тешкотии во дизајн

299
00:19:15,650 --> 00:19:19,130
е да се основа се направи HTML многу помоќен.

300
00:19:19,130 --> 00:19:24,420
Аголна е начин на што ќе ви овозможи да се направи HTML нешто повеќе експресивен.

301
00:19:24,420 --> 00:19:30,520
На пример, можам да кажам дека јас ќе одам да се врзуваат или се поврзе ова поле за текст

302
00:19:30,520 --> 00:19:35,080
на променлива во рамките на мојот аголна JavaScript код.

303
00:19:35,080 --> 00:19:37,030
Ова нг-модел не само тоа.

304
00:19:37,030 --> 00:19:41,550
Која во основа вели дека оваа точка во внатрешноста на оваа поле за текст,

305
00:19:41,550 --> 00:19:45,000
само дружат дека со променлива new_todo_description

306
00:19:45,000 --> 00:19:47,870
во рамките на JavaScript код.

307
00:19:47,870 --> 00:19:51,600
Тоа е многу моќна, бидејќи јас не мора експлицитно да одат на

308
00:19:51,600 --> 00:19:53,310
на ДОМ да се добие таа информација.

309
00:19:53,310 --> 00:19:56,250
Јас не мора да се каже document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
Јас не мора да ја користи jQueries како ДОМ пристап.

311
00:19:58,750 --> 00:20:03,280
Можам да се дружат со променлива, а потоа кога ќе се промени таа променлива

312
00:20:03,280 --> 00:20:07,400
во рамките на вклучите Javascript-тоа е се чуваат во синхронизација со HTML,

313
00:20:07,400 --> 00:20:11,640
така што го поедноставува процесот на морале да се вратиш назад и напред меѓу двете.

314
00:20:11,640 --> 00:20:18,260
Дали тоа има смисла?

315
00:20:18,260 --> 00:20:22,060
>> И ќе забележите дека нема HTML код за пристап.

316
00:20:22,060 --> 00:20:27,760
Ние само направи HTML помоќен,

317
00:20:27,760 --> 00:20:32,070
и сега, на пример, ние може да ги правите нештата како ова,

318
00:20:32,070 --> 00:20:38,610
како кога ќе кликнете на ова, јавете се на оваа функција во рамките на todos.js,

319
00:20:38,610 --> 00:20:43,410
и ние би можеле да го направат тоа пред, но постојат и други нешта, како овој нг-модел,

320
00:20:43,410 --> 00:20:47,020
и ќе забележите оваа нг-повторуваат.

321
00:20:47,020 --> 00:20:51,520
Што мислите ова го прави?

322
00:20:51,520 --> 00:20:54,390
Тука е нашата неподреден список од порано.

323
00:20:54,390 --> 00:20:56,470
Имаме ул тагови,

324
00:20:56,470 --> 00:21:03,710
но сум јас некогаш рендерирање таа листа во внатрешноста на JavaScript код?

325
00:21:03,710 --> 00:21:09,280
Јас не сум некогаш експлицитно рендерирање таа листа.

326
00:21:09,280 --> 00:21:11,580
Како го прави ова дело?

327
00:21:11,580 --> 00:21:16,410
Добро, начинот на аголна постигнува ова е тоа се нарекува повторувач.

328
00:21:16,410 --> 00:21:22,760
Во суштина ова вели дека сакам да се печати овој HTML

329
00:21:22,760 --> 00:21:26,240
за секој внатре довршување на моите Todos низа.

330
00:21:26,240 --> 00:21:31,850
Внатрешноста на todos.jr постои Todos низа токму тука,

331
00:21:31,850 --> 00:21:37,910
и ова ќе кажам аголна движење низ таа низа, и за секој елемент ќе видите

332
00:21:37,910 --> 00:21:41,390
Сакам да печати ја оваа HTML.

333
00:21:41,390 --> 00:21:44,620
Ова е вид на страшно, бидејќи јас само да го направите тоа

334
00:21:44,620 --> 00:21:47,760
без да се напише за телефонска линија,

335
00:21:47,760 --> 00:21:52,250
која за на to-do листа, која беше само 30 линии на код

336
00:21:52,250 --> 00:21:54,700
не може да биде најмногу корист нешто,

337
00:21:54,700 --> 00:22:01,240
но ако имате голем проект, тоа би можеле да добијат многу поудобно.

338
00:22:01,240 --> 00:22:06,100
>> Ова е едно решение за овој проблем, што го прави HTML помоќен,

339
00:22:06,100 --> 00:22:10,820
и кој ни овозможува да се задржи JavaScript и HTML во синхронизација.

340
00:22:10,820 --> 00:22:13,220
Постојат и други можни начини да се реши овој проблем,

341
00:22:13,220 --> 00:22:15,320
и не секој рамка го прави ова.

342
00:22:15,320 --> 00:22:17,720
Не секој рамка работи по овие линии.

343
00:22:17,720 --> 00:22:19,490
Некои рамки имаат различни пристапи,

344
00:22:19,490 --> 00:22:23,310
и може да најдете дека ќе уживате во кодирање во една рамка во однос на другите.

345
00:22:23,310 --> 00:22:26,160
Ајде да погледнеме во уште еден.

346
00:22:26,160 --> 00:22:30,060
Ова е to-do листа кодирани во една рамка наречена 'рбетот.

347
00:22:30,060 --> 00:22:33,250
Одам да одат преку овој брзо.

348
00:22:33,250 --> 00:22:38,300
Ќе почнам со HTML, пред да одиме таму.

349
00:22:38,300 --> 00:22:40,290
Една секунда.

350
00:22:40,290 --> 00:22:43,950
Почнувајќи со HTML, како што ќе забележите, нашите HTML е многу слична

351
00:22:43,950 --> 00:22:50,000
на она што беше порано, па не премногу нови на тој фронт.

352
00:22:50,000 --> 00:22:55,410
Но нашите js фајл е малку различен.

353
00:22:55,410 --> 00:23:00,360
'Рбетот вид на ја има оваа идеја, или лежи на идејата

354
00:23:00,360 --> 00:23:04,750
дека многу од она што го правиме со, да речеме, нашиот JavaScript проекти

355
00:23:04,750 --> 00:23:09,110
се размислува за модели и колекции на овие модели.

356
00:23:09,110 --> 00:23:12,510
Ова би можело да биде, на пример, слика и колекции на слики,

357
00:23:12,510 --> 00:23:16,230
или идејата на еден пријател и збирки на пријатели.

358
00:23:16,230 --> 00:23:20,700
И честопати кога сме програмирање вклучите Javascript-апликации

359
00:23:20,700 --> 00:23:25,340
ние ќе ти се претставуваат идејата да се има збирка на пријатели

360
00:23:25,340 --> 00:23:29,500
некако во JavaScript, и 'рбетот ни дава овој слој

361
00:23:29,500 --> 00:23:33,040
на врвот на постоечките низи го вклучите Javascript-и предмети

362
00:23:33,040 --> 00:23:38,300
да се направи повеќе моќни нешта со кои полесно.

363
00:23:38,300 --> 00:23:41,870
>> Тука сум дефинирани to-do модел,

364
00:23:41,870 --> 00:23:44,630
а вие не мора да се грижите премногу за синтаксата,

365
00:23:44,630 --> 00:23:48,730
но забележите дека она што е една од особините на ова?

366
00:23:48,730 --> 00:23:53,190
Таа има стандардно област.

367
00:23:53,190 --> 00:23:56,640
'Рбетот ми дозволува да наведете веќе надвор од лилјак

368
00:23:56,640 --> 00:24:00,190
секој нов to-do дека јас се создаде ќе имаат овие стандардни.

369
00:24:00,190 --> 00:24:04,100
Сега можам да се прилагодите ова, но се во состојба да ги одредите стандардно

370
00:24:04,100 --> 00:24:07,220
е убаво, и тоа е вид на удобен, бидејќи ова не е нешто што е како

371
00:24:07,220 --> 00:24:10,430
својствени во JavaScript, и сега не мора експлицитно да

372
00:24:10,430 --> 00:24:12,430
велат дека Todos се нецелосни.

373
00:24:12,430 --> 00:24:19,190
Можам да кажам право исклучување на лилјакот дека Todos се случува да бидат означени како некомплетно.

374
00:24:19,190 --> 00:24:21,300
Забележи тогаш што е ова?

375
00:24:21,300 --> 00:24:25,520
Сега имам to-do листа, и тоа е една збирка.

376
00:24:25,520 --> 00:24:30,960
Забележите областа поврзани со кој се вели дека модел за довршување.

377
00:24:30,960 --> 00:24:33,390
Ова е мојот начин на раскажување backbone што

378
00:24:33,390 --> 00:24:37,350
Одам да се размислува за собирање на овие индивидуални Todos.

379
00:24:37,350 --> 00:24:42,140
Ова е во основа на моделот структура за мојата програма.

380
00:24:42,140 --> 00:24:44,980
Тука имам оваа идеја на собирање,

381
00:24:44,980 --> 00:24:48,960
и во основа на ставките содржани во таа збирка се сите ќе биде овие Todos,

382
00:24:48,960 --> 00:24:51,910
и дека е многу природно во таа смисла

383
00:24:51,910 --> 00:24:59,890
бидејќи имам Todos, и јас ги имаат во колекцијата.

384
00:24:59,890 --> 00:25:02,940
>> Ајде да погледнеме малку повеќе од ова.

385
00:25:02,940 --> 00:25:05,900
Тука е столбот поглед.

386
00:25:05,900 --> 00:25:08,890
Од друга работа што 'рбетот вели дека е тоа

387
00:25:08,890 --> 00:25:14,660
многу од моделите кои сте размислување за или дури и колекции

388
00:25:14,660 --> 00:25:19,150
се случува да треба да имаат на некој начин да бидат прикажани.

389
00:25:19,150 --> 00:25:21,900
Ние треба да се направи што to-do листа,

390
00:25:21,900 --> 00:25:25,460
и не би било убаво ако ние може да обезбеди за секој модел

391
00:25:25,460 --> 00:25:28,390
или се дружат со секој модел ова гледиште

392
00:25:28,390 --> 00:25:34,020
која ни овозможува да претпоставувам се поврзете двете заедно?

393
00:25:34,020 --> 00:25:38,320
А пред моравме да се користи за телефонска линија која ќе поминува низ

394
00:25:38,320 --> 00:25:41,130
секој довршување во нашата листа, а потоа го испечатите овде

395
00:25:41,130 --> 00:25:44,650
ние во основа може да се поврзе со овој модел.

396
00:25:44,650 --> 00:25:47,550
Ова е to-do поглед.

397
00:25:47,550 --> 00:25:50,550
Ова е поврзано со довршување го најдовме порано.

398
00:25:50,550 --> 00:25:54,940
Сега секој довршување е прикажано или renderable

399
00:25:54,940 --> 00:25:56,960
со тоа и да го приказот за задачи.

400
00:25:56,960 --> 00:25:59,440
Забележите дека некои од полињата.

401
00:25:59,440 --> 00:26:05,880
Што мислите оваа tagName е, tagName: Li?

402
00:26:05,880 --> 00:26:09,790
Се сеќавам од пред кога сакавме да го направи довршување

403
00:26:09,790 --> 00:26:16,700
ние ќе мора експлицитно да го спарите нашите Todos со овој таг Ли.

404
00:26:16,700 --> 00:26:21,080
Сега ние велиме дека таму каде што тоа довршување се случува да се живее

405
00:26:21,080 --> 00:26:25,250
ќе биде во внатрешноста на таг Ли.

406
00:26:25,250 --> 00:26:31,440
А сега ние сме, исто така, асоцирањето настани со нашите Todos.

407
00:26:31,440 --> 00:26:34,320
>> Секој довршување има овој настан.

408
00:26:34,320 --> 00:26:38,480
Ако кликнете доста вклучите копче, тоа е она што сакам да кажам дека таму,

409
00:26:38,480 --> 00:26:43,080
тогаш во основа се одбележи довршување како спротивност на она што беше пред

410
00:26:43,080 --> 00:26:45,890
и потоа повторно да ја даде на апликација.

411
00:26:45,890 --> 00:26:47,810
Ова е вид на слични на кодот пред тоа.

412
00:26:47,810 --> 00:26:50,730
Се сеќавам кога ние се означени како било спротивното или-

413
00:26:50,730 --> 00:26:52,410
и тогаш ние го ре-изречена.

414
00:26:52,410 --> 00:26:57,750
Но забележите сега овој настан се користи за да биде нешто што беше во HTML.

415
00:26:57,750 --> 00:26:59,640
Таа седеше таму.

416
00:26:59,640 --> 00:27:01,410
Го копчето имаше за клик.

417
00:27:01,410 --> 00:27:05,310
Кога ќе кликнете на копчето, тој вид на прави нешта да

418
00:27:05,310 --> 00:27:07,210
поставите тој довршување да биде некомплетно.

419
00:27:07,210 --> 00:27:11,180
Тука сме поврзани тој настан на кликнување дека го вклучите копчето

420
00:27:11,180 --> 00:27:15,830
и обратен дали тоа е или исклучите со овој став.

421
00:27:15,830 --> 00:27:20,480
>> Ова е убав начин на поставување на овој настан, така што тоа е многу цврсто врзани

422
00:27:20,480 --> 00:27:26,980
ова гледиште, и така забележите ова уште еден.

423
00:27:26,980 --> 00:27:31,050
Имам оваа Рендерирање метод, и ние не треба да се оди преку деталите.

424
00:27:31,050 --> 00:27:33,650
Тоа е вид на слични на она што го имавме порано,

425
00:27:33,650 --> 00:27:36,070
но забележиш јас не сум looping преку нешто.

426
00:27:36,070 --> 00:27:40,700
Јас не сум печатите таа ул таг тоа е вид на велејќи дека јас ќе одам да се печати од сите елементи.

427
00:27:40,700 --> 00:27:46,610
Јас сум обезбедување на функционалност за рендерирање овој to-do точка.

428
00:27:46,610 --> 00:27:49,400
Ова е многу моќен концепт бидејќи во основа

429
00:27:49,400 --> 00:27:53,600
нашите to-do листа се состои од сите овие Todos, и ако ние во основа може да се определи

430
00:27:53,600 --> 00:27:56,890
начин да се направи една од оние Todos

431
00:27:56,890 --> 00:28:04,230
тогаш можеме да имаме моќни 'рбетот по себе ги дадат сите на Todos

432
00:28:04,230 --> 00:28:07,760
со повикување на методот на Рендерирање на поединецот Todos.

433
00:28:07,760 --> 00:28:14,180
Ова е концепт кој е корисен.

434
00:28:14,180 --> 00:28:18,160
Сега е добро прашање да побарате е колку е оваа апликација се стави заедно?

435
00:28:18,160 --> 00:28:21,200
Бидејќи ние имаме способност да направат еден довршување,

436
00:28:21,200 --> 00:28:23,860
но како да се добие идеја на повеќе Todos?

437
00:28:23,860 --> 00:28:25,100
>> Ајде да ги разгледаме во тоа.

438
00:28:25,100 --> 00:28:27,100
Ова е последниот дел.

439
00:28:27,100 --> 00:28:29,740
Забележите имаме to-do листа овде,

440
00:28:29,740 --> 00:28:34,440
и ќе забележите тоа е исто така поглед.

441
00:28:34,440 --> 00:28:36,970
И да се оди во текот на неколку работи,

442
00:28:36,970 --> 00:28:45,280
овој иницијализира метод ќе биде повикан кога првпат ја креирате оваа to-do листа.

443
00:28:45,280 --> 00:28:52,630
Како што можете да видите, тоа е како создавање на to-do листа и асоцирањето со овој став.

444
00:28:52,630 --> 00:28:57,860
И тогаш јас додаде функции тука значи, во основа, кога ќе додадете елемент-

445
00:28:57,860 --> 00:29:01,440
ова е слично на AddItem метод го видовме пред-

446
00:29:01,440 --> 00:29:07,430
Одам да се создаде нов довршување објект, и ќе забележите Јас сум, всушност, повикувајќи

447
00:29:07,430 --> 00:29:13,080
оваа нова довршување метод, па ова е предвидено со 'рбетот,

448
00:29:13,080 --> 00:29:16,010
и јас може да помине во мојот имот овде.

449
00:29:16,010 --> 00:29:23,710
И сега секој довршување што ја создавам користење на овој ќе добиете дека функционалност што сме го виделе порано.

450
00:29:23,710 --> 00:29:28,140
Забележиш јас сум ги расчистуваа полето за текст пред-мала ситница-

451
00:29:28,140 --> 00:29:32,900
и тогаш јас сум додавајќи оваа збирка.

452
00:29:32,900 --> 00:29:37,630
>> Ова Речиси се чини чудно, бидејќи пред ние едноставно мораше да го направи тоа todos.push,

453
00:29:37,630 --> 00:29:43,310
а потоа бевме направи, а тоа може да изгледа покомплицирано за овој проект,

454
00:29:43,310 --> 00:29:46,980
и може да најдете дека 'рбетот, па дури и аголна или било која друга рамка

455
00:29:46,980 --> 00:29:50,790
не одговараат на вашите проекти, но јас мислам дека е важно да се размислува за

456
00:29:50,790 --> 00:29:54,100
што тоа значи на поголем обем за поголеми проекти,

457
00:29:54,100 --> 00:29:56,610
затоа што ако имавме поголем проект каде што бевме претставуваат

458
00:29:56,610 --> 00:30:00,860
некои многу сложени собирање, нешто подлабоко од само to-do листа,

459
00:30:00,860 --> 00:30:04,490
да речеме листа на пријатели или нешто слично, тоа би можело да дојде во рака

460
00:30:04,490 --> 00:30:09,620
затоа што би можеле да организираат нашиот код во едно навистина лесен начин,

461
00:30:09,620 --> 00:30:12,550
на начин кој ќе овозможи полесно за некој друг

462
00:30:12,550 --> 00:30:16,820
кои сакаа да ги собереш еден проект да се гради врз.

463
00:30:16,820 --> 00:30:21,450
Можете да видите дека ова дава многу структура.

464
00:30:21,450 --> 00:30:26,580
И тогаш јас сум повикувајќи ја даде на овој AddItem.

465
00:30:26,580 --> 00:30:31,050
Го направи, како што можете да видите, а вие не мора да ја сфати оваа целосна синтакса,

466
00:30:31,050 --> 00:30:37,790
но во основа за секој модел тоа се случува да се јавите на поединецот Рендерирање метод.

467
00:30:37,790 --> 00:30:41,500
Тоа е вид на местото каде што ова доаѓа од.

468
00:30:41,500 --> 00:30:44,140
Ајде да одредите како да направат индивидуални Todos,

469
00:30:44,140 --> 00:30:47,310
и тогаш ајде лепак нив заедно како целина.

470
00:30:47,310 --> 00:30:49,810
Но тоа обезбедува начин на апстракција,

471
00:30:49,810 --> 00:30:55,470
затоа што може да се промени начинот на кој јас да одлучи да ја даде на поединечните Todos,

472
00:30:55,470 --> 00:30:57,940
и јас не би треба да се смени ниту на овој код.

473
00:30:57,940 --> 00:31:00,700
Тоа е вид на ладно.

474
00:31:00,700 --> 00:31:08,540
>> Дали некој има било какви прашања во врска со вклучите Javascript-рамки?

475
00:31:08,540 --> 00:31:14,310
[Студентите нечујни прашање]

476
00:31:14,310 --> 00:31:16,050
О, да, тоа е големо прашање.

477
00:31:16,050 --> 00:31:19,080
Прашањето беше како не сум го вклучуваат рамки?

478
00:31:19,080 --> 00:31:22,970
Повеќето го вклучите Javascript-рамка се во основа, само js датотеки

479
00:31:22,970 --> 00:31:25,740
дека можете да го вклучите на врвот на вашиот код.

480
00:31:25,740 --> 00:31:29,830
Известување во главата дел од мојот HTML имам сите овие скрипта тагови,

481
00:31:29,830 --> 00:31:34,250
а конечниот скрипта таг е код кој ние сум напишал.

482
00:31:34,250 --> 00:31:38,820
А потоа на 3-рамка кодови се само така скрипта тагови.

483
00:31:38,820 --> 00:31:42,110
Јас сум ги вклучувајќи и од она што се нарекува CDN,

484
00:31:42,110 --> 00:31:46,200
што ми дозволува да ја земете од некој друг во овој момент

485
00:31:46,200 --> 00:31:57,930
но секој рамка има ова-прилично многу може да се најдат на содржината

486
00:31:57,930 --> 00:32:03,540
за одредена JavaScript библиотека на располагање на некои CDN или нешто слично,

487
00:32:03,540 --> 00:32:05,570
а потоа можете да ги вклучат и овие скрипта тагови.

488
00:32:05,570 --> 00:32:07,600
Дали тоа има смисла?

489
00:32:07,600 --> 00:32:09,500
Кул.

490
00:32:09,500 --> 00:32:11,730
>> Тие се 2 различни пристапи.

491
00:32:11,730 --> 00:32:14,640
Оние кои не се единствените пристапи кон решавање на овој проблем.

492
00:32:14,640 --> 00:32:17,080
Постојат многу различни работи кои

493
00:32:17,080 --> 00:32:19,490
некој може да се направи, и постојат многу рамки таму.

494
00:32:19,490 --> 00:32:23,300
Аголна и 'рбетот не ја кажува целата приказна.

495
00:32:23,300 --> 00:32:26,370
Среќно со вашата конечна проекти, и многу ти благодарам.

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