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
それは面白いのようなものだ。私たちは、JavaScriptでのto-doリストを実装する必要があります。

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
Let 'sは、我々はこのHTMLを与えられていると言う。

26
00:01:14,270 --> 00:01:16,620
私は、これは少し小さくするつもりです。

27
00:01:16,620 --> 00:01:19,300
あなたが見ることができるように、私は藤堂言う少しヘッダを持ってい

28
00:01:19,300 --> 00:01:21,740
私はTODOの説明を入力することができますし、小さな箱

29
00:01:21,740 --> 00:01:26,990
し、新しい項目ボタンは、ので、このリストに新しいTODOを入力してみましょう。

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
ここで見ることができるように、ここでは、私たちの小さなトドスサントスヘッダです。

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
のクリックイベントが発生され、この関数が呼び出されます。

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
私は、そのグローバルなデータ構造にTODOを追加する必要が

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
Let 'sは、ユーザーがこのボックスに何かを入力すると言う。

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
DOMには、このプログラムによるアクセス。

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
我々は実際にgetElementByIdをというJavaScriptで関数を使用することができます。

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
そして今、私はIDによって要素を取得していますので、私はそのテキストボックスのIDが必要です

73
00:04:11,580 --> 00:04:15,860
ので、私はそれにID new_todo_descriptionを与えてくれた。

74
00:04:15,860 --> 00:04:18,399
それは私が要素を取得するつもりだ方法です。

75
00:04:18,399 --> 00:04:23,880
それは得るためにどのIDを指定すると、この関数への私の議論だ。

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
IDトドスサントスですページのこの分配器、

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
私は、再びIDでその要素を取得しています

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
>> 今ではトドスサントスのDIVの内側のHTML内部は、完全に明らかである

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
今私のトドスサントスの配列内のすべての要素のために私は、そのHTMLの中にそれをプリントアウトしたい。

108
00:06:39,770 --> 00:06:43,710
私は、このリストの一番下にそれを追加したい。

109
00:06:43,710 --> 00:06:49,040
ただ、C言語のように、私は、forループを使用することができます、と私は私のリストの先頭から開始するつもりだ

110
00:06:49,040 --> 00:06:54,140
要素0で、私は、リストの長さにすべての道を行くつもりです。

111
00:06:54,140 --> 00:07:01,100
私たちは、実際にlengthプロパティを使用して、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
私は再びトドスサントスのdiv、それの内部HTMLのプロパティにアクセスすることができます

115
00:07:12,970 --> 00:07:17,560
そして私は、この新しいリスト項目を追加するつもりだ、それは囲まれて起こっている

116
00:07:17,560 --> 00:07:25,390
こののliタグは、と私は、+演算子で連結するつもりです

117
00:07:25,390 --> 00:07:28,040
そしてそれは、私のトドスサントス配列のi番目の要素だ

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
これは、トドスサントスリストからリストへの個々の要素が追加されます

125
00:08:01,080 --> 00:08:05,470
その後、リスト全体を閉じ、これは私のaddTodo関数である。

126
00:08:05,470 --> 00:08:09,590
私は基本的にテキストボックスからTODOを取得することから始めます。

127
00:08:09,590 --> 00:08:18,950
私はトドスサントス配列にすることを追加し、私は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
我々は、入力にDo項目を基本的に許可されたユーザーが追加することをページ上のテキストボックスを持っていた。

137
00:08:45,310 --> 00:08:49,210
そして、我々はそのテキストボックスからそのTODOを取得するために、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
これは、これを行う方法の1つである。

158
00:10:08,470 --> 00:10:13,750
私はこれの実装では、ディスプレイ、見れば

159
00:10:13,750 --> 00:10:21,120
基本的に私は、TODOを入力して、私は、このトグルボタンを押した場合

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
>> 基本的にはそのトドスサントスアレイ内のすべてのTODO用

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
基本的に言っても、新しいTODOプッシュと並行して

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
私たちは、基本的にはi番目のTODOに項目が対応するかどうかをここでチェックしている

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
我々は、これらの2つのフィールドを結合し、C言語で何を使用します

197
00:12:30,140 --> 00:12:35,420
両方の情報をカプセル化するものに？

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
>> まさに、私たちは、構造体のいくつかの種類を使用することができます

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
私は今、一番上に1の配列を持って注目してください

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のプロパティがあるので、我々はTODOを持って気づく

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
>> 我々はトドスサントス[i]がやっていることに注意してください。完全

219
00:13:49,060 --> 00:13:52,880
代わりに別々に完全な配列をチェックする、

220
00:13:52,880 --> 00:13:56,560
と我々は我々が江原プロパティを取得しているツー行う文字列を取得したいときに気づく

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
div要素の内側のHTMLを取得するための

231
00:14:34,760 --> 00:14:40,520
少し、私は推測する、長いです。

232
00:14:40,520 --> 00:14:45,100
のdocument.getElementByIdは（ "トドスサントス"）あります。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のスクリプトの設定のためのライブラリの一種であることを知っている

240
00:15:11,510 --> 00:15:15,910
それはそれは簡単にDOMへのアクセス個々の要素のようなものを行うことができます。

241
00:15:15,910 --> 00:15:21,280
ここではその代わりのdocument.getElementByIdを言う（ "ドス"）。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すべてのアクセスを構築するために、すべてのこのDOMへのアクセスを有していた

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 representation

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
私は、リスト機能を行うためにドローを書かなければならなかった。

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
これらは、一般的な-Iは、あなたがパターン設計の言うことができると思います

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
私が今までDOMに入るのですか？

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
>> 角度は、私たちが何かのDOMと私たちのJavaScriptの表現を保持するのに役立ちます

291
00:18:35,590 --> 00:18:40,430
同期のようなもの、それは、jsファイルではありませんもしそうなら

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
NG-クリックとngのリピートと言うこれらの新しい属性があることに注意してください。

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
my角度JavaScriptコード内の変数に。

303
00:19:35,080 --> 00:19:37,030
このNG-モデルは、まさにそれを行います。

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
DOMは、その情報を取得します。

309
00:19:53,310 --> 00:19:56,250
私のdocument.getElementByIdを言う必要はありません。

310
00:19:56,250 --> 00:19:58,750
私はDOMアクセスのような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
その結果は、2つの間を行ったり来たり移動することのプロセスを簡素化します。

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
そして、このngのモデルのように、我々は前にそれを行うことができますが、他のものがあります

320
00:20:43,410 --> 00:20:47,020
このNGリピートに気づく。

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
我々は、ULタグを持つ

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
myトドスサントス配列の各TODO内側用。

330
00:21:26,240 --> 00:21:31,850
todos.jrの内側トドスサントスアレイは、右ここにあります

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
forループを記述せずに、

335
00:21:47,760 --> 00:21:52,250
どのコードの唯一の30行だったto-doリストのために

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
そしてあなたは、他の上の1フレームワークのコーディング楽しむことがあります。

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
Javaスクリプトの既存の配列やオブジェクトの上に

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
私が作成することに致します任意の新しいこれらのデフォルト値を持っているとしている。

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
トドスサントスが不完全であると言う。

373
00:24:12,430 --> 00:24:19,190
私はトドスサントスが不完全としてマークされるようにしようとしている右のバットから言うことができます。

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
モデルTODO言うことに関連付けられたフィールドに注意してください。

377
00:24:30,960 --> 00:24:33,390
これはバックボーンのことを伝えるの私の方法です

378
00:24:33,390 --> 00:24:37,350
私は、これらの個々のトドスサントスのコレクションについて考えてするつもりです。

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
そして基本的には、そのコレクションに含まれるアイテムはすべて、これらのトドスサントスになるだろうしている

382
00:24:48,960 --> 00:24:51,910
そしてそれは、この意味では非常に自然である

383
00:24:51,910 --> 00:24:59,890
ので、私はトドスサントスを持っていない、と私はコレクションにそれらを持っている。

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
我々は、リストを行うことをレンダリングする必要が

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
それは、私たちは、私は2つを一緒に接続する推測することができます？

393
00:25:34,020 --> 00:25:38,320
私たちが通って実行されるためのループを使用していた前に、一方

394
00:25:38,320 --> 00:25:41,130
すべての私たちのリストにTODO、その後ここでそれをプリントアウト

395
00:25:41,130 --> 00:25:44,650
我々は基本的には、このモデルとそれを接続することができます。

396
00:25:44,650 --> 00:25:47,550
これはツー行うビューです。

397
00:25:47,550 --> 00:25:50,550
これは、我々は以前に見つかったTODOに関連付けられています。

398
00:25:50,550 --> 00:25:54,940
今、すべてのTODOは表示可能であるか、またはレンダリング

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を何だと思います：李？

402
00:26:05,880 --> 00:26:09,790
TODOをレンダリングするために我々が望んでいたときに前から覚えている

403
00:26:09,790 --> 00:26:16,700
我々は明示的にこれのliタグで当社トドスサントスをペアリングする必要があります。

404
00:26:16,700 --> 00:26:21,080
今、私たちは、このTODOが住んでしようとしている場所と言っています

405
00:26:21,080 --> 00:26:25,250
のliタグの内側にあることを行っている。

406
00:26:25,250 --> 00:26:31,440
そして今、我々はまた、我々トドスサントスでイベントを関連付けるしている。

407
00:26:31,440 --> 00:26:34,320
>> すべてのTODO、このつのイベントがあります。

408
00:26:34,320 --> 00:26:38,480
あなたはかなりトグルボタンをクリックした場合、それは、私はそこに言っているものだ

409
00:26:38,480 --> 00:26:43,080
その後、基本的には前にあったものの反対としてTODOをマーク

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
TODOが不完全になることを設定します。

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
この1つは多くの気づき、このビューに、など。

423
00:27:26,980 --> 00:27:31,050
私はこのrenderメソッドを持っており、我々は詳細を通過する必要はありません。

424
00:27:31,050 --> 00:27:33,650
それは、我々は前に持っていたものと同様のようなものだ

425
00:27:33,650 --> 00:27:36,070
しかし、私は何をループしていないよ気づく。

426
00:27:36,070 --> 00:27:40,700
私はすべての要素を印刷するつもりと言って、一種のだとulのタグを印刷していないよ。

427
00:27:40,700 --> 00:27:46,610
私はこの1のto-doアイテムをレンダリングするための機能を提供しています。

428
00:27:46,610 --> 00:27:49,400
これは、基本的には非常に強力な概念です

429
00:27:49,400 --> 00:27:53,600
我々のto-doリストは、これらのすべてのトドスサントスで構成されており、我々は基本的に指定することができた場合

430
00:27:53,600 --> 00:27:56,890
thoseトドスサントスのいずれかをレンダリングする方法

431
00:27:56,890 --> 00:28:04,230
次に我々はトドスサントスのすべてをレンダリング自体は我々の強力なバックボーンを持つことができます

432
00:28:04,230 --> 00:28:07,760
個人トドスサントスでrenderメソッドを呼び出すことによって。

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
我々は一TODOをレンダリングする能力を持っているので、

436
00:28:21,200 --> 00:28:23,860
しかし、どのように我々は、複数のトドスサントスのアイデアを取得するのですか？

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リストを作成するときにこのinitializeメソッドが呼び出されます。

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
私は新しいTODOオブジェクトを作成し、私が実際に呼んでいるに気づくつもり

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
そして今、私はこれを使用して作成したすべてのTODOは、我々は前に見たその機能を取得します。

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
しかし基本的には、各モデルのために、それは個々のrenderメソッドを呼び出すために起こっている。

467
00:30:37,790 --> 00:30:41,500
ことは、これはどこから来るかのようなものです。

468
00:30:41,500 --> 00:30:44,140
ただ、個々のトドスサントスをレンダリングする方法を指定してみましょう

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
私は個々のトドスサントスをレンダリングすることを決定する方法を変更する可能性があるため、

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のhead部分に注目し、

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
そのようないくつかのCDNか何かで利用可能な特定のJavaScriptライブラリのために、

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]