[Powered by Google Translate] [セミナー] [JavaScriptフレームワーク：なぜと方法] [ケビンシュミット] [ハーバード大学] 【これはCS50です。] [CS50.TV] 

やあ、みんな。 JavaScriptフレームワークセミナーへようこそ。 、私の名前はケビンで、今日はJavaScriptフレームワークについて話するつもりだ このセミナーの目的は、あなたを得るために言うが、それ自体が特定のフレームワークを習得することではありません しかし、フレームワークのカップルにあなたの幅広い導入を与えるために 我々はこれまでのフレームワークを使用する理由を示しています。 

私はそれを行う前に、私は、JavaScriptで少し背景を提供します そして我々はそこからそれを取るよ。 私たちは、to-doリストを実装することによって開始するつもりだ。 今日ここに私たちのタスクリストです。 それは面白いのようなものだ。私たちは、JavaScriptでのto-doリストを実装する必要があります。 これが私たちの最初の目標ですので、それが見えるように何が起こっているのです。 我々はそれを行うためのフレームワークを使用するつもりはない。 我々はコードをJavaScriptに行くとto-doリストを動作させるためだ。 その後、我々はフレームワークを使わずに設計を改善するつもりだ。 我々は単にJavaScriptを独りで行うことができます様々なことを議論するつもりだ 我々のto-doリストを作るもう少しうまく設計されています。 次に我々は、いくつかのjQueryので投げるつもり それから私達は同じto-doリストを見てするつもりだ、 ただ別の枠組みで実施され、我々は説明します  道に沿って賛否両論。 

to-doリストにあることの実装を開始してみましょう。 Let 'sは、我々はこのHTMLを与えられていると言う。 私は、これは少し小さくするつもりです。 あなたが見ることができるように、私は藤堂言う少しヘッダを持ってい 私はTODOの説明を入力することができますし、小さな箱 し、新しい項目ボタンは、ので、このリストに新しいTODOを入力してみましょう。 、JavaScriptフレームワークセミナーを与える と私は、新しいアイテムをヒットするよ。 私は私を実装すると言い、このJavaScriptの警告を取得します。 我々はそれを実装するようになってきました。 HTMLとJavaScriptの両方、のはこのためのコードをチェックアウトしてみましょう。 ここに私たちのHTMLです。 ここで見ることができるように、ここでは、私たちの小さなトドスサントスヘッダです。 つまり、一番上にその大胆なものだった そして我々は、プレースホルダと入力ボックスを持っている その後、この関数addTodoを呼び出すには、このボタンの一定の属性があります。 誰もが意味されてクリックで何を推測していますか？ [学生聞き取れ応答] 良い、をクリックすると、イベントのような一種である マウスをクリックすると同じようにイベントであり、我々は何をやっている 私たちは、その機能を実行するには、このボタンをクリックしたイベントを抱き合わせているされています。 AddTodoは、そのボタンをクリックすると、このイベントハンドラです。 

あなたが見ることができるように、私は新しい項目]ボタンをクリックしたとき のクリックイベントが発生され、この関数が呼び出されます。 機能を見てみましょう。 あなたが見ることができるように、ここでは、これまで私のJavaScriptコードです。 私は一番上に持っていることは私のto-doリストのためのグローバルなデータ構造です。 これは、配列のように見えます。それはちょうど空の配列です。 そして私は、先ほど見たaddTodo機能を持って そこのコードの唯一の行は、このアラートです。 それは私を実装警告し、私は手元に2タスクがある。 私は、そのグローバルなデータ構造にTODOを追加する必要が そして私はto-doリストを引き出したい。 何もただまだ空想んが、JavaScriptには、不慣れかもしれない ので、私はゆっくりと行って、その方法でのJavaScriptの基礎を検討するつもりです。 

この打撃を与えるましょう。 Let 'sは、ユーザーがこのボックスに何かを入力すると言う。 私はちょうどここで、テキストに何かを入力しました。 どのように私には、JavaScriptを介したアクセス、そのテキストのようなものですか？ JavaScriptを、その基本的な特徴の一つは、それが私たちに与えることであることを忘れないでください DOMには、このプログラムによるアクセス。 それは、私たちは、この実際のHTMLの要素とそのプロパティにアクセスすることができます。 我々は裸の骨JavaScriptでそれを行う方法 我々は実際にgetElementByIdをというJavaScriptで関数を使用することができます。 私は、いくつかの変数に入力されたそこのテキストを保存したい ので、私は、new_todoという新しい変数を言うつもりです そして私はその要素を取得するつもりです。 これは、関数です。getElementByIdを。 そして今、私はIDによって要素を取得していますので、私はそのテキストボックスのIDが必要です ので、私はそれにID new_todo_descriptionを与えてくれた。 それは私が要素を取得するつもりだ方法です。 それは得るためにどのIDを指定すると、この関数への私の議論だ。 そしてそれは、HTMLの要素だし、それはプロパティがあります。 あなたはこれらを見てきました。彼らは属性です。 ユーザーの入力を記憶するテキスト要素の属性は、値と呼ばれる。 私はnew_todoと呼ばれるこの変数に今そのテキストボックスの値を保存した。 今、私はクールの一種で、この変数へのプログラムによるアクセスを、持っている なぜなら今私は何ができるか、私は私のto-doリストに追加することができますです。 

我々は、でこれを行うとJavaScriptにして、これに慣れていない場合、心配しない方法 しかしちょうどそれを通過することはtodos.pushです ここまで私のグローバルなデータ構造の名前だので、 と私はnew_todoをプッシュするつもりです。 今、私はJavaScriptにそれを追加したので、これは素晴らしいです to-doリストの表現。 しかし、今どのように私はそれをHTMLに戻って取得するのですか？ 私はそれを押し戻すのソートする方法を見つける必要があります。 言い換えれば、私は一種のこれを描画する必要があります。 私たちがやろうとしていることは我々はto-doリストを描画するつもりです。 私は、そのページ上の他のHTMLを更新する必要が あなたが見ることができるようにと、私は、ここでこの小さなコンテナを残してきた IDトドスサントスですページのこの分配器、 と私はそこにto-doリストを置くつもりです。 最初に私はto-doリスト、古いがそこにあった、と言うので、それをクリアするつもりです。 私は、再びIDでその要素を取得しています と私は、その要素の内側のHTMLにアクセスしています そして私はそれをクリアするつもりです。 あるように、我々はこのコードを残した場合、我々はそこに空白の何も見えないだろうが、 そして今、私は新しいto-doリストのレンダリングを開始したいと思います。 私は基本的に私のto-doリストを一掃するつもりです。 

今ではトドスサントスのDIVの内側のHTML内部は、完全に明らかである そして今私は私のリストの追加を開始する必要があります。 私は戻って追加したい最初のことは、順不同のリストタグです これは、基本的に、これは順不同のリストの先頭であることを示します。 今私のトドスサントスの配列内のすべての要素のために私は、そのHTMLの中にそれをプリントアウトしたい。 私は、このリストの一番下にそれを追加したい。 ただ、C言語のように、私は、forループを使用することができます、と私は私のリストの先頭から開始するつもりだ 要素0で、私は、リストの長さにすべての道を行くつもりです。 私たちは、実際にlengthプロパティを使用して、JavaScriptで配列の長さを取得することができます。 基本的に私はここの内側に非常に類似した何かをするつもりです その要素をプリントアウトする。 私は再びトドスサントスのdiv、それの内部HTMLのプロパティにアクセスすることができます そして私は、この新しいリスト項目を追加するつもりだ、それは囲まれて起こっている こののliタグは、と私は、+演算子で連結するつもりです そしてそれは、私のトドスサントス配列のi番目の要素だ そして私はそのタグを閉じるつもりです。 今、すべての要素のために我々は新たなリストのエントリを追加します。 そして、私たちは本当にする必要があるすべては、そのタグを閉鎖です。 私は、リストタグを順不同その閉鎖するだけで必要があります。 

あなたはそれがどのように動作するかの感触を得るのですか？ これは全体のリストが開きます。 これは、トドスサントスリストからリストへの個々の要素が追加されます その後、リスト全体を閉じ、これは私のaddTodo関数である。 私は基本的にテキストボックスからTODOを取得することから始めます。 私はトドスサントス配列にすることを追加し、私はto-doリストを再レンダリング。 さて、私のリストに項目を追加することができます。 これは一種の刺激的であるので、わずか数行のコードで 私たちは、基本的に私達が項目を追加することができますto-doリストを作りました。 素晴らしい。 ことは、JavaScriptの基本的な紹介のようなものだ。 、今の構文についてはあまり心配しないでください しかし、この概念について考える。 我々はいくつかのHTMLを持っていた。 我々は、入力にDo項目を基本的に許可されたユーザーが追加することをページ上のテキストボックスを持っていた。 そして、我々はそのテキストボックスからそのTODOを取得するために、JavaScriptを使用していました。 我々は、基本的にはご希望されるJavaScriptの配列、内部に格納され to-doリストの私たちのプログラム表現、 その後我々はそれをプリントアウト。 これはtodos.jsです。 

これはクールの一種であるが、どのように我々はこれをさらに取ることができますか？ あなたが見ることができるだけでなく、これは完全なto-doリストが好きではありません。 例えば、私は、不完全としてこれらの項目のいずれかをマークすることはできません 私はアイテムを優先順位を変更または項目を削除したい場合は好きです。 これは大丈夫ですが、私たちはこれをさらに取ることができます。 私は、余分な機能を追加することについてはあまり話をするつもりはありません しかし、我々はさらにかかることがあります。 、このto-doリストに複数の機能を追加することについて話してみましょう 個々のto-do項目をチェックすることができるということになるだろうされている ので、基本的に私はこれをやったと言って、それを交差されている。 それを達成することができるいくつかのコードを見てみましょう。 私は一番上に何をやったかに気づくこと私が追加したさ 新しいグローバル配列が完全と呼ばれる。 私は基本的に保存するために、これを使用しているかどうかのto-doリストの項目 完了するかではありません。 これは、これを行う方法の1つである。 私はこれの実装では、ディスプレイ、見れば 基本的に私は、TODOを入力して、私は、このトグルボタンを押した場合 それが交差するので、このリストのすべての項目は、完全なを持っている または不完全な状態となり、私はそれを表現するために別の配列を使用しています。 

基本的にはそのトドスサントスアレイ内のすべてのTODO用 基本的には示しています完全な配列内のアイテムはあり それが完了であるか否か。 私は、このコードにはかなり最小限の変更を加える必要があった ので、ここで私たちのaddTodo機能です。 ここで私はアレイ上にそれをプッシュしていることに注意してください、 そして私は、完全な配列に0を押している、 基本的に言っても、新しいTODOプッシュと並行して 私は、この項目を追加している、そしてそれは、この値と相まっている それはそれは不完全だということを意味します。 そして私はto-doリストを再描画しています。 今、私はこのdrawTodoList機能を追加しました気づく。 これは、我々の前に持っていた多くのコードを取り 基本的にはボックスをクリアし、新しいto-doリストを描画します。 しかし、これの内部はループたちがもっと今を少しやっていることに気づく。 私たちは、基本的にはi番目のTODOに項目が対応するかどうかをここでチェックしている 完全であり、我々は、これらの2つの状況で異なる動作をしている。 それが完了するなら、我々は、このデル·タグを追加している これは、基本的には効果によってそのストライキを得ることができる方法です それが完了したなら、to-doリストを横断 そうでないならば、我々はそれを含めていない。 そしてその種は、そのの世話を 

それはこれを達成する一つの方法である。 そして、ユーザーがこれらのいずれかをクリックしたときに気付く 我々はそれの完了ステータスを切り替えます。 ときにユーザーがクリックし、我々は、それが完了しているかどうか逆かよ そして我々はそれを再描画します。 作品のこの種。 我々は、自分のタスクを遂行するこれらの機能を持っている これは大丈夫です。 我々は、しかし、これについてやれることは何がありますか？ 我々はこれら2グローバルな配列を持っていることに注意してください。 これは、Cだった、と私たちは一種の表現という2の配列を持っていた場合 ソートの何らかの形で関係していたデータ 我々は、これらの2つのフィールドを結合し、C言語で何を使用します 両方の情報をカプセル化するものに？ 誰もが提案をしたいですか？ [学生聞き取れ応答] 

まさに、私たちは、構造体のいくつかの種類を使用することができます とあなたに戻ってと思われる場合、PSET 3、言う、 我々は辞書を持っていたし、我々が持っていた覚えているかどうかの単語 辞書にあった、そしてそのすべての情報がまとめられた いくつかのデータ構造の内部。 私はこれらの2つの異なる配列を避けるために、このコードを使ってできることの一つ 情報の類似した部分のために、私はJavaScriptオブジェクトにそれらを組み合わせることができますです。 のは、その時点で見てみましょう。 私は今、一番上に1の配列を持って注目してください と私がやったことですと、これは単にソートのためのJavaScriptの構文です オブジェクトのリテラルバージョンを作成し、 そして、そこに2のプロパティがあるので、我々はTODOを持って気づく そしてそれが完全または不完全であるかどうかと一緒に保持されています。 これは非常によく似たコードです。 私たちは、JavaScriptオブジェクトを使用している。 向上、物事のこの種。 今のように、関連する情報のすべてのこれらのフィールドが一緒に保存されています。 我々はそれをプリントアウトするために行くとき、私たちは、フィールドにアクセスすることができます。 

我々はトドスサントス[i]がやっていることに注意してください。完全 代わりに別々に完全な配列をチェックする、 と我々は我々が江原プロパティを取得しているツー行う文字列を取得したいときに気づく その藤堂のため、この種のは、理にかなっているので、 すべての項目はそれについて、これらの本質的な特性を有している。 それは藤堂を有しており、それが完全であるかどうかにかかわらず有している。 あまりにも多くの変更があり、機能的には、単にコードのいくつかの詳細を追加しました。 これは右、いくつかの面で改善されて？ 私は少しデザイン外我々は織り込み、意味。 今、私たちは、基本的には、このデータをカプセル化するオブジェクトを持つ。 我々は、JavaScriptの面でここから何ができるより多くのことはありますか？ 右ここにこのコードその通知を希望 div要素の内側のHTMLを取得するための 少し、私は推測する、長いです。 のdocument.getElementByIdは（ "トドスサントス"）あります。innerHTMLプロパティは、。 我々は、このコードは少しフレンドリーに見えるように行うことが一つのこと ので、私は、行ったり来たり、スクロールが左右保つために持っていないでしょう 私はjQueryのようなライブラリを使用することができますです。 

、セミナー2をチェックアウトしてみましょう これは同じコードですが、jQueryを使って行われている。 あなたは、jQueryを使ってあまりにも精通してないかもしれません しかしちょうどjQueryのスクリプトの設定のためのライブラリの一種であることを知っている それはそれは簡単にDOMへのアクセス個々の要素のようなものを行うことができます。 ここではその代わりのdocument.getElementByIdを言う（ "ドス"）。innerHTMLプロパティ 私は、jQueryのはあまりきれいな方法を使用することができます これは、単にセレクタを使用することである。 あなたが見ることができるように、このコードは少しクリーナーを手に入れた、 非常に機能的に似ていますが、それはアイデアだ。 我々は、これまでの物事のカップルを見てきました そう私達はちょうど生のJavaScript実装を始めています。 私たちは、新しい機能を追加し、我々がそれを改善する方法を示しました ちょうど私達がJavaScriptで持っているもの。 

誰もがこの設計の任意の難しさを見ていますか？ すなわち、私は推測するまたは困難である必要はありませんが、言わせての 私たちは、to-doリストのプロジェクトをやっていなかったし、明日が決定 私たちは、食料品のリストや買い物リストのプロジェクトを作りたかった。 これらの多くの機能は非常に似ています。 我々は、JavaScriptの外に取得したいものの多くは、非常に一般的です これはの方法のいくつかの種類のための必要性を強調 行うことは、これは容易。 私は、このHTMLすべてのアクセスを構築するために、すべてのこのDOMへのアクセスを有していた ように私は、このモデルとto-doリストを表現するつもりです。 そして、私はJavaScriptの開発者としての責任だ気付く 私は同期していることを、HTMLとJavaScriptを維持するため。 自動的に行われ何もないことのJavaScript representation やto-doリストはHTMLに押し出され得る。 それは私を除いて施行さ何もない。 私は、リスト機能を行うためにドローを書かなければならなかった。 そして、それが意味する私は、ないかもしれない、それは、それを行うのが妥当だ しかしそれは時々退屈かもしれません。 あなたが大規模なプロジェクトを持っている場合、それは難しいかもしれません。 

フレームワーク、フレームワークの目的の一つ 因子のそのプロセスとソートを簡素化することです これらは、一般的な-Iは、あなたがパターン設計の言うことができると思います その人々は一般的に、データを表現する方法のいくつかの種類を持っている それは、地図情報であるかどうか、友達リストであるかどうか か何か、to-doリスト。 一部の人々は、一般的な情報を表現する方法がある そして、彼らは一般的に同期して、その情報のソートを保持する必要 ユーザーがビューのいくつかの種類で見ているものとの間には、 あなたの講義で見たモデルビューコントローラのようにの点で言えば、 し、この場合には、このJavaScriptの配列であるモデル。 フレームワークは、私たちにその問題を解決する方法を与える。 それでは、このto-doリストの実装を見てみましょう 枠組みでangularjs呼んだ。 これがそうだ。それはスライドに収まることに注意してください。 私は左と右にスクロールする必要はありません。 それはおそらく、フレームワークを使用することをお勧めする大きな理由ではありません しかし、通知は私が今までここで個々のHTML要素にアクセスするのですか？ 私が今までDOMに入るのですか？ あなたはそのような任意のdocument.getElementByIdか何かを参照していますか？ いいえ、それは逝ってしまった。 

角度は、私たちが何かのDOMと私たちのJavaScriptの表現を保持するのに役立ちます 同期のようなもの、それは、jsファイルではありませんもしそうなら プログラムですべてのことをHTMLコンテンツに取得する方法はありませない場合 JavaScriptからどのように我々は同期でこれを維持している？ それは。jsファイルにない場合、それはHTML、右側にあると持っている？ これは、HTMLファイルの新しいバージョンである 我々はここで多くのことを追加しました気づく。 NG-クリックとngのリピートと言うこれらの新しい属性があることに注意してください。 設計の難しさは、この問題を解決するための角度のアプローチ 基本的にHTMLははるかに強力にすることです。 角度は、HTMLが多少表現力にするためにできるようにする方法です。 たとえば、私は、私はこのテキストボックスを結びつけるか、バインドするつもりだと言うことができます my角度JavaScriptコード内の変数に。 このNG-モデルは、まさにそれを行います。 基本的に言うと、その項目は、このテキストボックスの内側に、その ちょうどそれは、変数new_todo_description関連付ける JavaScriptコード内。 私は明示的に行かなければならないので、それは非常に強力です DOMは、その情報を取得します。 私のdocument.getElementByIdを言う必要はありません。 私はDOMアクセスのようなjQueriesを使用する必要はありません。 私は、その変数を変更したとき、私はその変数に関連付ける、とすることができます JavaScriptの中でそれは、HTMLとの同期を維持している その結果は、2つの間を行ったり来たり移動することのプロセスを簡素化します。 お分かりでしょうか？ 

そして、誰HTMLアクセスコードがない気づく。 私達はちょうどHTMLより強力作った、 そして今では、例えば、我々はこのようなことを行うことができます この上でクリックしたときに、todos.jsの範囲内で、この関数を呼び出すように、 そして、このngのモデルのように、我々は前にそれを行うことができますが、他のものがあります このNGリピートに気づく。 あなたは、これは何んだと思いますか？ ここでは前から私たちの順不同のリストです。 我々は、ULタグを持つ しかし、私は今までにJavaScriptコードの内部にそのリストをレンダリングするのですか？ 私が今までに明示的にリストをレンダリングしていないよ。 これがどのように動作しますか？ さて、道の角度は、これはこれはリピータと呼ばれている実現しています。 基本的にこれは、私はこのHTMLを印刷したいと言っている myトドスサントス配列の各TODO内側用。 todos.jrの内側トドスサントスアレイは、右ここにあります これは、その配列を通して角度外出を教えてくれます、そしてすべての要素のためにあなたが見る 私はあなたがこのHTMLを印刷したい。 私はこれを行うだけでできるので、これは素晴らしいの一種である forループを記述せずに、 どのコードの唯一の30行だったto-doリストのために 最も有益なことはないかもしれないことは、 大規模なプロジェクトを持っている場合ですが、これは非常に便利な得ることができる。 

これは、HTMLをより強力になり、この問題に対する一つの解決策である そしてそれは私たちが同期してJavaScriptとHTMLを維持することができます。 この問題を解決するための他の可能な方法があり、 とすべてのフレームワークは、これを行いません。 すべてのフレームワークは、これらの線に沿って動作しません。 一部のフレームワークは、異なるアプローチを持っている そしてあなたは、他の上の1フレームワークのコーディング楽しむことがあります。 複数のを見てみましょう。 これは、バックボーンという枠組で起動コード化されたto-doリストです。 私はすぐにこの通過するつもりです。 我々はそこに行く前に私は、HTMLから始めましょう。 一秒。 あなたが気づくように、HTMLから始めて、我々のHTMLは非常に似ています それが前面に前に、そうではありませんあまりにも新しかったもの。 しかし、私たちのjsファイルは少し異なっています。 バックボーンの種類は、このアイデアを持っている、または考えに基づいて構築 我々が何をすべきか、多くのことを、言って、私たちのJavaScriptのプロジェクト これらのモデルのモデルやコレクションについて考えている。 これは、例えば、写真の光と集かもしれ や友人の友人やコレクションのアイデア。 そして、しばしば、我々はJavaScriptアプリケーションをプログラミングしているとき 友人のコレクションを持っていることのアイデアを表現するの私たちは、並べ替えます 何とかJavaScript、およびバックボーンで私たちは、この層を提供します Javaスクリプトの既存の配列やオブジェクトの上に より簡単にそれとより強力なことを行う。 

ここで私は、のto-doのモデルを定義した そしてあなたは、構文についてはあまり心配する必要はありません しかし、何がこのプロパティのいずれかだということに気づく？ これは、デフォルトのフィールドを有する。 バックボーンは私がバットからすでに指定することができます 私が作成することに致します任意の新しいこれらのデフォルト値を持っているとしている。 今、私はこれをカスタマイズしますが、デフォルトを指定することができるということができます いいです、これはのようなものだものではありませんので、それは便利のようなものだ JavaScriptで固有の、そして今私は明示的にする必要はありません トドスサントスが不完全であると言う。 私はトドスサントスが不完全としてマークされるようにしようとしている右のバットから言うことができます。 次に注目し、これは何ですか？ 今私はto-doリストを持って、それはコレクションだ。 モデルTODO言うことに関連付けられたフィールドに注意してください。 これはバックボーンのことを伝えるの私の方法です 私は、これらの個々のトドスサントスのコレクションについて考えてするつもりです。 これは基本的に自分のプログラムのためのモデル構造である。 ここで私は、コレクションのこのアイデアを持っている そして基本的には、そのコレクションに含まれるアイテムはすべて、これらのトドスサントスになるだろうしている そしてそれは、この意味では非常に自然である ので、私はトドスサントスを持っていない、と私はコレクションにそれらを持っている。 

これのもう少し見てみましょう。 ここバックボーン図である。 バックボーンは言うことを他の事はである あなたが考えていることをモデルの多くについて、あるいはコレクション 表示されているいくつかの方法を持っている必要としている。 我々は、リストを行うことをレンダリングする必要が 我々はモデルごとに提供することができれば、それは素晴らしいことではないでしょう または各モデルでは、このビューを関連付ける それは、私たちは、私は2つを一緒に接続する推測することができます？ 私たちが通って実行されるためのループを使用していた前に、一方 すべての私たちのリストにTODO、その後ここでそれをプリントアウト 我々は基本的には、このモデルとそれを接続することができます。 これはツー行うビューです。 これは、我々は以前に見つかったTODOに関連付けられています。 今、すべてのTODOは表示可能であるか、またはレンダリング これでビューを行う。 フィールドの一部に注目してください。 このtagNameをは、tagNameを何だと思います：李？ TODOをレンダリングするために我々が望んでいたときに前から覚えている 我々は明示的にこれのliタグで当社トドスサントスをペアリングする必要があります。 今、私たちは、このTODOが住んでしようとしている場所と言っています のliタグの内側にあることを行っている。 そして今、我々はまた、我々トドスサントスでイベントを関連付けるしている。 

すべてのTODO、このつのイベントがあります。 あなたはかなりトグルボタンをクリックした場合、それは、私はそこに言っているものだ その後、基本的には前にあったものの反対としてTODOをマーク その後、アプリケーションを再レンダリング。 これは前のコードに似たようなものです。 我々はどちらか反対か - としてそれをマークしたときに覚えている その後我々はそれを再レンダリング。 しかし、今のHTMLにあったものにするために使用されるこのイベントに気づく。 それはそこに座っていた。 ボタンがクリックしていた。 あなたがボタンをクリックすると、それは一種のにものを行います TODOが不完全になることを設定します。 ここでは、そのトグルボタンをクリックするとイベントを関連付けた それは、このビューでオンまたはオフであるかどうか逆転。 

それは非常に緊密にバインドされているように、これにより、このイベントを設定するための良い方法です この1つは多くの気づき、このビューに、など。 私はこのrenderメソッドを持っており、我々は詳細を通過する必要はありません。 それは、我々は前に持っていたものと同様のようなものだ しかし、私は何をループしていないよ気づく。 私はすべての要素を印刷するつもりと言って、一種のだとulのタグを印刷していないよ。 私はこの1のto-doアイテムをレンダリングするための機能を提供しています。 これは、基本的には非常に強力な概念です 我々のto-doリストは、これらのすべてのトドスサントスで構成されており、我々は基本的に指定することができた場合 thoseトドスサントスのいずれかをレンダリングする方法 次に我々はトドスサントスのすべてをレンダリング自体は我々の強力なバックボーンを持つことができます 個人トドスサントスでrenderメソッドを呼び出すことによって。 これは、ここに便利です概念です。 今聞いて良い質問は、このアプリケーションがどのように一緒に置かれていますか？ 我々は一TODOをレンダリングする能力を持っているので、 しかし、どのように我々は、複数のトドスサントスのアイデアを取得するのですか？ 

のは、その時点で見てみましょう。 これは最後の部分です。 我々はここでto-doリストビューを持っているに気づく、 それはまた、ビューの通知。 そして物事のカップルを越えるためには、 我々が最初にこのto-doリストを作成するときにこのinitializeメソッドが呼び出されます。 あなたが見ることができるように、それはto-doリストを作成し、このビューに関連付けることのようだ。 あなたが追加したときに、それから私はとても基本的に、ここで機能を追加された項目を これは我々が前にシーソーAddItemメソッドメソッドに似ています 私は新しいTODOオブジェクトを作成し、私が実際に呼んでいるに気づくつもり この新しい方法藤堂ので、これはバックボーンによって提供され、 と私はここに私のプロパティで渡すことができます。 そして今、私はこれを使用して作成したすべてのTODOは、我々は前に見たその機能を取得します。 私は、テキストボックスをクリアしています前小さな小さな細部に注意してください そして私はこのコレクションを追加している。 

これはほとんど、我々はちょうどそのtodos.pushをしなければならなかったので、前に奇妙なようである そして我々は、行われたが、これは、この特定のプロジェクトのために、より複雑に見えるかもしれません そしてあなたはそのバックボーンあるいは角度または他のフレームワークを見つけることができます あなたの特定のプロジェクトに合わせて、私はそれが考えることが重要だとは思いません 何、これは大規模なプロジェクトのために大規模に意味し、 なぜなら我々は表現された大規模なプロジェクトを持っていた場合 いくつかの本当に複雑なコレクション、ジャストto-doリストより深い何か、 のは、友達リスト、またはそのような何かを言わせて、これは便利になる可能性が 私たちは本当に便利な方法で私たちのコードを編成する可能性があるため、 他の誰かのためにそれを容易にするような方法で 誰が上に構築するためのプロジェクトをピックアップしたいと思いました。 あなたは、これが構造の多くを提供していることがわかります。 そして私はこのAddItemメソッドでレンダリングを呼んでいる。 あなたが見ることができるように、レンダリングし、この完全な構文を把握する必要はありませんが、 しかし基本的には、各モデルのために、それは個々のrenderメソッドを呼び出すために起こっている。 ことは、これはどこから来るかのようなものです。 ただ、個々のトドスサントスをレンダリングする方法を指定してみましょう その後全体として一緒に接着してみましょう。 しかし、これは、抽象化の方法を提供し 私は個々のトドスサントスをレンダリングすることを決定する方法を変更する可能性があるため、 と私は、このコードのいずれかを変更する必要はありません。 それはクールのようなものだ。 

誰もがJavaScriptフレームワークについてのご質問はありますか？ [学生聞き取れ質問] ああ、確かに、それは素晴らしい質問ですね。 問題は、どのように私はフレームワークが含まれたのでしたか？ ほとんどのJavaScriptフレームワークは、基本的にはただのjsファイルです あなたのコードの先頭に含めることができる。 私はこれらすべてのスクリプトタグを持っている私のHTMLのhead部分に注目し、 そして最終的なスクリプトタグは、我々が書いたコードです。 そして、3フレームワークコードは単に、スクリプトタグです。 私は、CDNと呼ばれるものからそれらを含めています 私は、この時点で他の誰かからそれを取得することを可能にする しかし、すべてのフレームワークは、この-あなたはかなり多くのコンテンツを見つけることができました そのようないくつかのCDNか何かで利用可能な特定のJavaScriptライブラリのために、 その後、あなたは、これらのスクリプトタグを含めることができます。 お分かりでしょうか？ 冷却する。 

それらは2つの異なるアプローチである。 それらは、この問題を解決する唯一のアプローチではありません。 多くの異なるものがあります 誰かがやる可能性があり、そこに多くのフレームワークがあります。 角度とバックボーン全体の話を教えていない。 あなたの最終的なプロジェクトで頑張って、どうもありがとうございました。 [CS50.TV]