[Powered by Google Translate] [Seminar] [JavaScript Frameworks: Mengapa dan Bagaimana] [Kevin Schmid] [Harvard University] [Ini adalah CS50.] [CS50.TV] 

Hi, semua orang. Selamat datang di seminar Frameworks JavaScript. Nama saya Kevin, dan hari ini aku akan berbicara tentang kerangka JavaScript, dan tujuan dari seminar ini bukan untuk mendapatkan Anda untuk, katakanlah, menguasai kerangka tertentu per se tetapi untuk memberikan pengenalan luas untuk beberapa kerangka dan menunjukkan mengapa kita akan pernah ingin menggunakan kerangka. 

Sebelum saya melakukan itu, saya akan memberikan sedikit latar belakang dalam JavaScript, dan kemudian kita akan mengambilnya dari sana. Kita akan memulai dengan menerapkan daftar to-do. Berikut daftar tugas kita untuk hari ini. Ini agak lucu. Kita harus menerapkan daftar to-do dalam JavaScript. Ini adalah apa yang akan terlihat seperti, jadi itulah tujuan pertama kami. Kami tidak akan menggunakan kerangka kerja untuk melakukan itu. Kita akan kode JavaScript dan mendapatkan to-do list untuk bekerja. Kemudian kita akan memperbaiki desain tanpa menggunakan kerangka. Kita akan membahas berbagai hal yang dapat kita lakukan hanya dengan JavaScript saja untuk membuat kami to-do daftar sedikit dirancang lebih baik. Kemudian kita akan melemparkan di beberapa jQuery, dan kemudian kita akan melihat yang sama to-do list, hanya diimplementasikan dalam kerangka kerja yang berbeda, dan kita akan membahas  pro dan kontra sepanjang jalan. 

Mari kita mulai menerapkan bahwa to-do list. Katakanlah kita diberi HTML ini. Aku akan membuat ini lebih kecil sedikit. Seperti yang Anda lihat, saya memiliki header kecil yang mengatakan Todo dan sebuah kotak kecil di mana saya dapat memasukkan deskripsi todo dan kemudian tombol item baru, jadi mari kita coba untuk memasukkan todo baru ke daftar ini. Berikan seminar kerangka JavaScript, dan aku memukul item baru. Saya bisa mendapatkan peringatan ini JavaScript mengatakan menerapkan saya. Kita harus menerapkannya. Mari kita memeriksa kode untuk ini, baik HTML dan JavaScript itu. Berikut HTML kita. Seperti yang dapat Anda lihat di sini, inilah sedikit Todos header kita. Itu hal tebal di bagian atas, dan kemudian kita memiliki kotak input dengan placeholder, dan kemudian ada atribut tertentu tombol ini yang memanggil fungsi ini addTodo. Apakah ada yang ingin menebak apa yang di klik yang menandakan? [Mahasiswa respon terdengar] Baik, di klik adalah semacam acara, seperti mengklik mouse hanya sebuah acara, dan apa yang kita lakukan adalah kita mengikat acara mengklik tombol ini untuk menjalankan fungsi tersebut. AddTodo adalah event handler untuk mengklik tombol itu. 

Seperti yang Anda lihat, ketika saya klik tombol item baru acara klik pada dipecat, dan fungsi ini dipanggil. Mari kita lihat fungsi. Seperti yang Anda lihat, inilah kode JavaScript saya sejauh ini. Apa yang saya miliki di atas adalah struktur data global untuk saya to-do list. Ini terlihat seperti sebuah array. Ini hanya sebuah array kosong. Dan kemudian saya memiliki fungsi addTodo yang kita lihat sebelumnya, dan satu-satunya baris kode dalam ada peringatan ini. Ini peringatan menerapkan saya, dan kemudian saya memiliki 2 tugas di tangan. Saya harus menambahkan todo ke struktur data global, dan kemudian saya ingin menarik keluar daftar to-do. Tidak terlalu mewah saja, namun JavaScript Anda mungkin belum terbiasa dengan, jadi aku akan pergi lambat dan meninjau dasar-dasar JavaScript dengan cara itu. 

Mari kita memberikan suntikan ini. Katakanlah pengguna memasukkan sesuatu dalam kotak ini. Aku hanya mengetik sesuatu di sini, teks. Bagaimana cara semacam akses yang teks melalui JavaScript? Ingat bahwa JavaScript, salah satu fitur yang mendasar adalah bahwa hal itu memberi kita ini akses program ke DOM. Hal ini memungkinkan kita untuk mengakses elemen dan sifat mereka HTML ini sebenarnya. Cara kita melakukannya dengan tulang-tulang JavaScript adalah kita benar-benar dapat menggunakan fungsi dalam JavaScript yang disebut getElementById. Saya ingin menyimpan teks yang diketik ada dalam beberapa variabel, jadi aku akan mengatakan sebuah variabel baru yang disebut new_todo, dan aku akan mendapatkan elemen tersebut. Ini adalah fungsi,. GetElementById. Dan sekarang aku mendapatkan elemen dengan ID, jadi saya membutuhkan ID dari kotak teks, jadi aku memberikannya ID new_todo_description. Itulah bagaimana aku akan mendapatkan elemen. Itu argumen saya untuk fungsi ini, untuk menentukan ID untuk mendapatkan. Dan itulah elemen dalam HTML, dan memiliki sifat. Anda telah melihat ini. Mereka atribut. Atribut dari elemen teks yang menyimpan input pengguna disebut nilai. Aku menyimpan nilai dari kotak teks sekarang dalam variabel ini disebut new_todo. Sekarang aku punya akses program ke variabel ini, yang merupakan jenis keren karena sekarang apa yang bisa saya lakukan adalah saya dapat menambahkannya ke saya to-do list. 

Cara kita akan melakukan ini dalam JavaScript-dan jangan khawatir jika Anda tidak terbiasa dengan hal ini, tapi hanya akan melalui itu todos.push karena itulah nama struktur data global saya di sini, dan aku akan mendorong new_todo. Ini bagus karena sekarang saya telah menambahkan ke saya JavaScript representasi yang to-do list. Tapi sekarang bagaimana cara mendapatkannya kembali ke HTML? Aku harus menemukan cara untuk semacam mendorong kembali. Dengan kata lain, aku agak harus menggambar ini. Apa yang akan kita lakukan adalah kita akan menarik to-do list. Saya perlu memperbarui HTML lainnya pada halaman tersebut, dan seperti yang Anda lihat, aku sudah meninggalkan ini wadah kecil di sini, pembagi ini dari halaman di mana ID adalah todos, dan aku akan menempatkan daftar yang harus dilakukan di sana. Pertama aku akan membersihkan itu karena, katakanlah, ada tua to-do list di sana. Saya mendapatkan elemen yang oleh ID lagi, dan aku mengakses HTML batin elemen, dan aku akan jelas bahwa. Jika kita meninggalkan kode ini, kita akan melihat apa-apa di sana kosong, dan sekarang saya ingin memulai render baru to-do list saya. Aku pada dasarnya akan menghapus saya to-do list. 

Sekarang batin dalam HTML itu todos div benar-benar jelas, dan sekarang saya harus mulai menambahkan daftar saya. Hal pertama yang saya ingin menambahkan kembali adalah unordered tag daftar, yang pada dasarnya menunjukkan bahwa ini adalah awal dari unordered list. Sekarang untuk setiap elemen dalam array todos saya, saya ingin mencetaknya dalam HTML itu. Saya ingin tambahkan pada bagian bawah daftar ini. Sama seperti di C, saya dapat menggunakan untuk loop, dan aku akan mulai pada awal daftar saya pada elemen 0, dan aku akan pergi jauh-jauh dengan panjang daftar. Kami benar-benar bisa mendapatkan panjang array dalam JavaScript menggunakan properti panjang. Pada dasarnya aku akan melakukan sesuatu yang sangat mirip dalam sini untuk mencetak elemen. Saya bisa lagi mengakses todos div, properti HTML batin itu, dan aku akan menambahkan pada item daftar baru, dan itu akan dikelilingi oleh tag li ini, dan aku akan menggabungkan dengan operator +, dan itulah elemen engan array todos saya, dan kemudian aku akan menutup tag tersebut. Sekarang untuk setiap elemen kami akan menambahkan entri daftar baru. Dan kemudian semua kita benar-benar perlu lakukan adalah menutup tag tersebut. Aku hanya perlu untuk menutup yang unordered tag daftar. 

Apakah Anda mendapatkan merasakan bagaimana yang bekerja? Ini akan membuka seluruh daftar. Ini menambahkan unsur-unsur individu dari daftar todos ke dalam daftar, dan kemudian yang menutup seluruh daftar, dan ini adalah fungsi addTodo saya. Pada dasarnya saya mulai dengan mendapatkan todo dari kotak teks. Saya menambahkan bahwa untuk todos array, dan kemudian saya kembali membuat to-do daftar. Sekarang saya bisa menambahkan item ke daftar saya. Ini adalah jenis menarik karena hanya dalam beberapa baris kode pada dasarnya kita telah membuat to-do list di mana kita dapat menambahkan item. Besar. Itu semacam pengenalan dasar JavaScript. Jangan khawatir terlalu banyak tentang sintaks untuk saat ini, tetapi berpikir tentang hal ini secara konseptual. Kami memiliki beberapa HTML. Kami memiliki kotak teks pada halaman yang pada dasarnya memungkinkan pengguna untuk memasukkan to-do item untuk menambahkannya. Dan kemudian kami menggunakan JavaScript untuk mengambil todo itu dari kotak teks. Kami yang tersimpan dalam array JavaScript, yang pada dasarnya adalah seperti representasi program kami yang daftar yang harus dilakukan, dan kemudian kita mencetaknya. Ini todos.js. 

Ini adalah jenis dingin, tapi bagaimana kita bisa mengambil ini lebih lanjut? Yah, seperti yang Anda lihat, ini tidak seperti lengkap to-do list. Sebagai contoh, saya tidak bisa menandai salah satu item yang tidak lengkap, seperti jika saya ingin melakukan prioritas ulang terhadap barang atau menghapus item. Ini tidak apa-apa, tapi kita bisa mengambil ini lebih lanjut. Aku tidak akan berbicara terlalu banyak tentang menambahkan fitur tambahan, tapi kita bisa mengambil yang lebih lanjut. Mari kita bicara tentang menambahkan satu lagi fitur ini to-do list, yang akan mampu memeriksa seorang individu to-do item yang dan memilikinya dicoret, jadi pada dasarnya mengatakan bahwa saya sudah melakukan ini. Mari kita lihat beberapa kode yang bisa mencapai itu. Perhatikan apa yang telah saya lakukan di atas adalah saya telah menambahkan array global baru yang disebut lengkap. Aku pada dasarnya menggunakan ini untuk menyimpan apakah item pada daftar to-do lengkap atau tidak. Ini adalah salah satu cara untuk melakukan ini. Jika saya melihat pelaksanaan ini, layar, pada dasarnya jika saya masukkan todo dan saya menekan tombol ini beralih melintasi keluar, sehingga setiap item pada daftar ini memiliki baik lengkap atau negara yang tidak lengkap, dan aku menggunakan array lain untuk mewakili itu. 

Pada dasarnya untuk setiap todo dalam berbagai todos ada item dalam array lengkap yang pada dasarnya menunjukkan apakah itu lengkap atau tidak. Saya harus membuat perubahan yang cukup minimal untuk kode ini, jadi inilah fungsi addTodo kami. Perhatikan bahwa di sini aku mendorongnya ke array, dan kemudian aku mendorong 0 ke array lengkap, pada dasarnya secara paralel dengan yang mendorong todo baru untuk mengatakan Saya menambahkan item ini, dan itu ditambah dengan nilai ini, yang berarti bahwa itu tidak lengkap. Dan kemudian aku menggambar ulang daftar to-do. Sekarang, perhatikan saya telah menambahkan fungsi ini drawTodoList. Ini membutuhkan banyak kode yang kami miliki sebelumnya, pada dasarnya sepi kotak dan kemudian menarik baru to-do list. Tapi perhatikan bahwa dalam hal ini untuk loop yang kita lakukan sedikit lebih sekarang. Kami pada dasarnya memeriksa apakah item yang sesuai dengan todo engan sini selesai, dan kita berperilaku berbeda dalam 2 keadaan. Jika itu selesai, kami menambahkan del tag ini, yang pada dasarnya adalah cara Anda bisa mendapatkan pemogokan bahwa melalui efek mencoret to-do list jika itu selesai, dan jika tidak, kita tidak termasuk itu. Dan sehingga jenis menangani itu, 

dan itu salah satu cara untuk mencapai hal ini. Dan kemudian melihat ketika pengguna mengklik salah satu kita beralih status penyelesaian itu. Ketika pengguna mengklik, kami akan membalikkan apakah itu sudah selesai atau tidak, dan kemudian kita akan redraw. Ini jenis karya. Kami memiliki fungsi ini yang melaksanakan tugas-tugas mereka sendiri, dan ini tidak apa-apa. Apakah ada sesuatu yang kita bisa berbuat lebih baik tentang hal ini, meskipun? Perhatikan kita memiliki 2 array global. Jika ini adalah C, dan kami memiliki 2 array semacam itu diwakili Data yang semacam terkait dalam beberapa cara apa yang akan kita gunakan dalam C untuk menggabungkan 2 bidang menjadi sesuatu yang merangkum kedua potongan informasi? Ada yang mau memberi saran? [Mahasiswa respon terdengar] 

Tepat, sehingga kita bisa menggunakan beberapa jenis struct, dan jika Anda berpikir kembali ke, katakanlah, pset 3, ingat kami memiliki kamus, dan kemudian kami harus apakah kata berada di kamus, dan semua informasi yang disatukan dalam beberapa struktur data. Satu hal yang dapat saya lakukan dengan kode ini untuk menghindari ini 2 array yang berbeda untuk potongan-potongan serupa informasi adalah saya bisa menggabungkan mereka ke dalam objek JavaScript. Mari kita lihat pada saat itu. Perhatikan saya hanya memiliki satu array di atas sekarang dan apa yang saya lakukan adalah-dan ini hanya sintaks JavaScript untuk jenis menciptakan sebuah versi harfiah dari suatu objek, dan melihat ada 2 properti, jadi kita harus todo, dan itu tetap bersama-sama dengan apakah itu lengkap atau tidak lengkap. Ini adalah kode yang sangat mirip. Kami menggunakan obyek JavaScript. Ini semacam hal membaik. Seperti sekarang, semua bidang informasi terkait disimpan bersama-sama. Ketika kita pergi untuk mencetak keluar, kita dapat mengakses ladang. 

Perhatikan bagaimana kita melakukan todos [i]. Lengkap bukannya memeriksa array lengkap secara terpisah, dan perhatikan ketika kita ingin mendapatkan to-do tali kita mendapatkan to-do properti itu todo, jadi ini semacam masuk akal karena setiap item memiliki sifat intrinsik tentang hal itu. Memiliki todo, dan memiliki apakah itu lengkap atau tidak. Tidak terlalu banyak perubahan di sana fungsional, hanya menambahkan beberapa kode. Ini adalah perbaikan di beberapa bidang, kan? Maksudku, kami keluar faktor desain sedikit. Sekarang kita memiliki objek pada dasarnya merangkum data ini. Apakah ada sesuatu yang lebih dari yang bisa kami lakukan di sini dalam hal JavaScript? Seperti pemberitahuan bahwa kode ini di sini untuk mendapatkan HTML batin div sedikit, saya kira, lama. Ada document.getElementById ("todos"). InnerHTML. Satu hal yang kita bisa lakukan untuk membuat kode ini terlihat sedikit ramah jadi saya tidak harus terus bergulir kiri dan kanan, maju-mundur, adalah saya bisa menggunakan perpustakaan seperti jQuery. 

Mari kita periksa Seminar 2, dan ini adalah kode yang sama, tapi itu dilakukan dengan jQuery. Anda mungkin tidak terlalu akrab dengan jQuery, tapi hanya tahu bahwa jQuery adalah semacam perpustakaan untuk JavaScript yang membuatnya lebih mudah untuk melakukan hal-hal seperti elemen individu akses DOM. InnerHTML sini bukannya mengatakan document.getElementById ("todos"). Saya bisa menggunakan cara yang lebih bersih di jQuery, yang hanya menggunakan penyeleksi. Seperti yang Anda lihat, kode ini tidak bisa sedikit lebih bersih, sangat mirip fungsional, tapi itu ide. Kami telah melihat beberapa hal sejauh ini, jadi kita mulai dengan implementasi JavaScript hanya mentah. Kami menambahkan fitur baru dan menunjukkan bagaimana kita dapat memperbaikinya dengan hanya apa yang kita miliki di JavaScript. 

Apakah ada yang melihat kesulitan dengan desain ini? Yaitu, saya kira-atau tidak selalu kesulitan tetapi katakanlah kami tidak melakukan proyek daftar to-do, dan besok kami memutuskan kami ingin membuat daftar belanjaan atau proyek daftar belanja. Banyak fitur ini sangat mirip. Banyak hal yang kita ingin keluar dari JavaScript yang sangat umum, dan ini menggarisbawahi perlunya semacam cara membuat ini lebih mudah dilakukan. Aku harus membangun semua akses ini HTML, semua ini akses DOM, seperti aku akan mewakili daftar to-do dengan model ini. Dan perhatikan saya bertanggung jawab sebagai pengembang JavaScript untuk menjaga HTML dan JavaScript yang saya miliki di sync. Tidak ada yang otomatis dibuat bahwa representasi JavaScript atau to-do list tersingkir ke HTML. Tidak ditegakkan bahwa kecuali aku. Aku harus menulis imbang to-do daftar fungsi. Dan yang mungkin tidak-maksudku, itu masuk akal untuk melakukan itu, tapi mungkin kadang-kadang membosankan. Jika Anda memiliki proyek yang lebih besar, yang mungkin sulit. 

Frameworks, salah satu tujuan dari kerangka adalah untuk menyederhanakan proses dan semacam faktor luar ini umum-saya kira Anda bisa mengatakan pola-desain bahwa orang umumnya memiliki beberapa jenis cara untuk mewakili data, apakah itu daftar teman, apakah itu informasi peta atau sesuatu atau to-do list. Beberapa orang umumnya memiliki cara untuk mewakili informasi, dan mereka umumnya perlu untuk menjaga semacam informasi di sync antara apa yang pengguna melihat dalam beberapa jenis tampilan, berbicara dalam hal seperti model view controller yang anda lihat di kuliah, dan kemudian model, yang dalam hal ini adalah array JavaScript ini. Kerangka memberi kita cara untuk mengatasi masalah tersebut. Sekarang mari kita lihat pada pelaksanaan ini to-do list dalam kerangka disebut angularjs. Ini dia. Perhatikan cocok pada slide. Saya tidak harus gulir ke kiri dan kanan. Itu mungkin bukan alasan yang baik untuk merekomendasikan menggunakan kerangka, tapi perhatikan saya pernah mengakses elemen HTML individu di sini? Apakah aku pernah pergi ke DOM? Apakah Anda melihat document.getElementById atau sesuatu seperti itu? Tidak, itu hilang. 

Sudut membantu kita menjaga DOM dan JavaScript representasi kami sesuatu jenis sinkron, jadi jika tidak dalam file js, jika tidak ada cara untuk pemrograman mendapatkan untuk semua konten HTML dari JavaScript bagaimana kita menjaga ini di sync? Jika tidak dalam file js., Itu harus berada di HTML, kan? Ini adalah versi baru dari file HTML, dan perhatikan kami telah menambahkan banyak di sini. Perhatikan ada atribut-atribut baru yang mengatakan ng-klik dan ng-ulangi. Pendekatan sudut untuk memecahkan masalah ini kesulitan dalam desain adalah pada dasarnya membuat HTML jauh lebih kuat. Angular adalah cara untuk memungkinkan Anda untuk membuat HTML agak lebih ekspresif. Sebagai contoh, saya dapat mengatakan bahwa aku akan mengikat atau mengikat kotak teks ini ke variabel dalam kode JavaScript sudut saya. Ini ng model tidak hanya itu. Yang pada dasarnya mengatakan bahwa item dalam kotak teks ini, hanya mengasosiasikan bahwa dengan new_todo_description variabel dalam kode JavaScript. Itu sangat kuat karena saya tidak harus secara eksplisit pergi ke DOM untuk mendapatkan informasi tersebut. Saya tidak harus mengatakan document.getElementById. Saya tidak harus menggunakan jQueries seperti akses DOM. Saya dapat mengasosiasikannya dengan variabel, dan kemudian ketika saya mengubah bahwa variabel dalam JavaScript itu disimpan di sinkron dengan HTML, sehingga menyederhanakan proses harus pergi bolak-balik antara keduanya. Apakah itu masuk akal? 

Dan perhatikan ada kode akses HTML. Kami baru saja membuat HTML lebih kuat, dan sekarang, misalnya, kita dapat melakukan hal-hal seperti ini, seperti ketika Anda klik ini, memanggil fungsi ini dalam lingkup todos.js, dan kita bisa melakukan itu sebelumnya, tapi ada hal-hal lain, seperti ini ng model, dan perhatikan ini ng-ulangi. Bagaimana menurut Anda ini tidak? Berikut daftar unordered dari sebelumnya. Kami memiliki tag ul, tapi aku pernah render daftar itu dalam kode JavaScript? Aku tidak pernah secara eksplisit render daftar itu. Bagaimana cara kerjanya? Nah, cara sudut menyelesaikan ini adalah ini disebut repeater. Pada dasarnya ini mengatakan bahwa saya ingin mencetak HTML ini untuk setiap todo dalam array todos saya. Di dalam todos.jr ada array todos di sini, dan ini akan memberitahu sudut pergi melalui array itu, dan untuk setiap elemen yang Anda lihat Saya ingin Anda cetak HTML ini. Ini adalah jenis mengagumkan karena saya hanya bisa melakukan ini tanpa harus menulis untuk loop, yang untuk to-do list yang hanya 30 baris kode mungkin tidak menjadi hal yang paling menguntungkan, tetapi jika Anda memiliki proyek besar, ini bisa sangat nyaman. 

Ini adalah salah satu solusi untuk masalah ini, membuat HTML lebih kuat, dan yang memungkinkan kita untuk menjaga JavaScript dan HTML di sync. Ada cara lain yang mungkin untuk memecahkan masalah ini, dan tidak setiap kerangka melakukan hal ini. Tidak setiap kerangka bekerja sepanjang jalur tersebut. Beberapa kerangka kerja memiliki pendekatan yang berbeda, dan Anda mungkin menemukan bahwa Anda menikmati coding dalam satu kerangka atas yang lain. Mari kita lihat satu lagi. Ini adalah daftar yang harus dilakukan dikodekan dalam kerangka kerja yang disebut Backbone. Aku akan pergi melalui ini dengan cepat. Saya akan mulai dengan HTML sebelum kami pergi ke sana. Satu detik. Dimulai dengan HTML, seperti Anda perhatikan, HTML kita sangat mirip apa itu sebelumnya, jadi tidak terlalu banyak yang baru di depan itu. Tapi file js kami sedikit berbeda. Backbone jenis memiliki ide ini, atau dibangun di atas ide bahwa banyak dari apa yang kita lakukan dengan, katakanlah, proyek JavaScript kami adalah berpikir tentang model dan koleksi dari model ini. Ini bisa jadi, misalnya, foto dan koleksi foto, atau gagasan dari seorang teman dan koleksi teman-teman. Dan seringkali ketika kita pemrograman aplikasi JavaScript kita akan semacam mewakili gagasan memiliki koleksi teman entah bagaimana dalam JavaScript, dan Backbone memberikan kita lapisan ini di atas array existing JavaScript dan benda-benda untuk melakukan hal-hal yang lebih kuat dengan lebih mudah. 

Di sini saya telah menetapkan sebuah model untuk-do, dan Anda tidak perlu khawatir terlalu banyak tentang sintaks, tapi melihat bahwa apa yang salah satu sifat ini? Ini memiliki medan default. Backbone memungkinkan saya untuk menentukan sudah dari kelelawar setiap baru to-do yang saya buat akan memiliki default ini. Sekarang saya dapat menyesuaikan ini, tetapi mampu menentukan default bagus, dan itu agak nyaman karena ini bukan sesuatu yang seperti melekat dalam JavaScript, dan sekarang saya tidak perlu secara eksplisit mengatakan bahwa todos tidak lengkap. Saya bisa mengatakan langsung dari kelelawar bahwa todos akan ditandai sebagai tidak lengkap. Perhatikan lalu apa ini? Sekarang aku punya daftar yang harus dilakukan, dan itu koleksi. Perhatikan bidang yang terkait dengan kata Model todo. Ini adalah cara saya memberitahu Backbone yang Aku akan berpikir tentang koleksi ini todos individu. Ini pada dasarnya adalah struktur model untuk program saya. Di sini saya punya ide ini koleksi, dan pada dasarnya barang-barang yang terdapat dalam koleksi yang semuanya akan todos ini, dan yang sangat alami dalam pengertian ini karena saya punya todos, dan saya memiliki mereka dalam koleksi. 

Mari kita lihat sedikit lebih ini. Berikut ini adalah tampilan Backbone. Hal lain yang Backbone mengatakan bahwa banyak model yang Anda pikirkan atau bahkan koleksi akan perlu memiliki beberapa cara yang ditampilkan. Kita perlu membuat bahwa daftar yang harus dilakukan, dan tidak akan lebih baik jika kita bisa menyediakan untuk setiap model atau mengasosiasikan dengan masing-masing model pandangan ini yang memungkinkan kita untuk kurasa menghubungkan dua bersama-sama? Padahal sebelumnya kami harus menggunakan untuk loop yang akan dijalankan melalui setiap todo dalam daftar kami dan kemudian mencetaknya di sini pada dasarnya kita dapat menghubungkannya dengan model ini. Ini adalah tampilan agenda. Hal ini terkait dengan todo kami temukan sebelumnya. Sekarang setiap todo yang dapat ditampilkan atau renderable oleh ini untuk tampilan agenda. Perhatikan beberapa bidang. Apa yang Anda pikir TagName ini, TagName: li? Ingat dari sebelumnya ketika kita ingin membuat sebuah todo kita harus secara eksplisit memasangkan todos kami dengan tag li ini. Sekarang kita mengatakan bahwa di mana todo ini akan hidup akan menjadi dalam sebuah tag li. Dan sekarang kita juga mengasosiasikan acara dengan todos kami. 

Setiap todo memiliki acara yang satu ini. Jika Anda mengklik cukup banyak tombol toggle, itulah yang saya katakan di sana, maka pada dasarnya menandai todo sebagai kebalikan dari apa itu sebelumnya dan kemudian kembali membuat aplikasi. Ini adalah jenis yang mirip dengan kode sebelumnya. Ingat ketika kita ditandai sebagai salah satu lawan atau dan kemudian kami kembali diberikan tersebut. Tapi perhatikan sekarang acara ini digunakan untuk menjadi sesuatu yang dalam HTML. Itu duduk di sana. Tombol memiliki klik. Ketika Anda mengklik tombol, jenis melakukan hal-hal untuk mengatur bahwa todo tidak lengkap. Di sini kita telah terkait bahwa hal mengklik tombol togel dan membalikkan apakah itu aktif atau tidak aktif dengan pandangan ini. 

Ini adalah cara yang baik untuk menyiapkan acara ini sehingga sangat terikat erat pandangan ini, dan melihat satu ini lagi. Saya memiliki metode render, dan kita tidak harus pergi melalui rincian. Ini sama halnya dengan apa yang kita miliki sebelumnya, tapi perhatikan aku tidak perulangan melalui apa-apa. Saya tidak mencetak bahwa tag ul itu semacam mengatakan saya akan mencetak semua elemen. Saya menyediakan fungsi untuk render yang satu ini harus dilakukan barang. Ini adalah konsep yang sangat kuat karena pada dasarnya kami to-do list terdiri dari semua todos ini, dan jika kita pada dasarnya dapat menentukan cara untuk membuat salah satu dari mereka todos maka kita dapat memiliki tulang kuat kami per se membuat semua todos dengan memanggil metode render pada todos individu. Ini adalah konsep yang berguna di sini. Sekarang pertanyaan yang baik untuk bertanya adalah bagaimana aplikasi ini sedang disatukan? Karena kita memiliki kemampuan untuk membuat satu todo, tapi bagaimana kita mendapatkan ide beberapa todos? 

Mari kita lihat pada saat itu. Ini adalah bagian terakhir. Perhatikan kita memiliki to-do tampilan daftar di sini, dan perhatikan itu juga pandangan. Dan untuk pergi ke beberapa hal, Metode ini initialize akan dipanggil ketika kita pertama kali membuat ini daftar to-do. Seperti yang Anda lihat, itu seperti membuat to-do list dan mengaitkannya dengan pandangan ini. Lalu aku menambahkan fungsi di sini jadi pada dasarnya ketika Anda menambahkan item- ini mirip dengan metode addItem kita lihat sebelumnya- Aku akan membuat objek todo baru, dan perhatikan aku benar-benar memanggil ini metode todo baru, jadi ini disediakan oleh Backbone, dan saya dapat lulus dalam properti saya di sini. Dan sekarang setiap todo yang saya buat dengan menggunakan ini akan mendapatkan fungsi yang kita lihat sebelumnya. Perhatikan Aku membersihkan kotak teks sebelum-sedikit kecil rinci- dan kemudian saya menambahkan koleksi ini. 

Ini hampir tampaknya aneh karena sebelum kami hanya harus melakukan todos.push itu, dan kemudian kami selesai, dan ini mungkin tampak lebih rumit untuk proyek khusus ini, dan Anda mungkin menemukan bahwa Backbone atau bahkan sudut atau kerangka lainnya tidak sesuai dengan proyek tertentu, tapi saya pikir sangat penting untuk berpikir tentang apa artinya ini pada skala yang lebih besar untuk proyek-proyek yang lebih besar, karena jika kita memiliki proyek yang lebih besar di mana kami mewakili beberapa koleksi benar-benar kompleks, sesuatu yang lebih dari sekedar to-do list, katakanlah daftar teman atau sesuatu seperti itu, ini bisa berguna karena kita bisa mengatur kode kami dengan cara yang benar-benar nyaman, dengan cara yang akan membuat lebih mudah bagi orang lain yang ingin mengambil sebuah proyek untuk membangun di atas. Anda dapat melihat bahwa ini menyediakan banyak struktur. Dan kemudian saya menelepon membuat di addItem ini. Render, seperti yang Anda lihat, dan Anda tidak perlu memahami sintaks ini penuh, tetapi pada dasarnya untuk setiap model itu akan memanggil metode render individu. Itu semacam mana ini berasal dari. Mari kita hanya menentukan bagaimana menerjemahkan todos individu, dan kemudian mari kita lem mereka bersama-sama secara keseluruhan. Tapi ini menyediakan cara abstraksi, karena saya bisa mengubah cara saya memutuskan untuk membuat todos individu, dan saya tidak akan mengubah apapun kode ini. Itu agak dingin. 

Apakah ada yang memiliki pertanyaan tentang kerangka kerja JavaScript? [Pertanyaan terdengar Mahasiswa] Oh, tentu, itu pertanyaan yang bagus. Pertanyaannya adalah bagaimana saya termasuk kerangka kerja? Kebanyakan kerangka JavaScript pada dasarnya hanya file js yang dapat Anda masukkan di atas kode Anda. Perhatikan di bagian kepala HTML saya, saya memiliki semua tag script, dan tag akhir script adalah kode yang kami telah menulis. Dan kemudian kode 3 kerangka hanya juga tag script. Aku termasuk mereka dari apa yang disebut CDN, yang memungkinkan saya untuk mendapatkannya dari orang lain pada saat ini tapi setiap kerangka kerja memiliki ini-Anda dapat cukup banyak menemukan konten untuk perpustakaan JavaScript tertentu yang tersedia pada beberapa CDN atau sesuatu seperti itu, dan kemudian Anda dapat menyertakan tag script. Apakah itu masuk akal? Keren. 

Mereka adalah 2 pendekatan yang berbeda. Itu bukan satu-satunya pendekatan untuk memecahkan masalah ini. Ada banyak hal yang berbeda yang seseorang bisa lakukan, dan ada banyak kerangka kerja di luar sana. Angular dan Backbone tidak menceritakan keseluruhan cerita. Good luck dengan proyek akhir Anda, dan terima kasih banyak. [CS50.TV]