1. บทนำ
บทความชุดนี้ได้แนะนำ bootstrap สำหรับรายละเอียดโปรดตรวจสอบบทความนี้: "การสอนแนะนำ bootstrap" ตั้งแต่ในโครงการล่าสุด Front-end ทำโดย ASP.NET MVC + Knockoutjs + Bootstrap ดังนั้นฉันจึงเริ่มเขียนซีรีส์นี้อีกครั้ง วันนี้มาดูกรอบ MVVM ของ Web Front -end - KnockoutJs
2. Knockoutjs คืออะไร?
ใครก็ตามที่มีส่วนร่วมในการพัฒนา. NET ควรรู้ว่ากรอบ MVVM นั้นรวมอยู่ใน WPF ดังนั้นการ KnockoutJS จึงเป็นกรอบ MVVM สำหรับการพัฒนาเว็บ เพื่อให้ง่ายขึ้นประโยชน์ของ MVVM จะถูกแยกออกจากรหัสการแสดงหน้าหน้าเพื่อให้โครงการส่วนหน้าสามารถรักษาได้ดีขึ้น
ก่อนหน้านี้เมื่อเราเขียนหน้าเว็บรหัส JS และรหัส HTML ถูกผสมเข้าด้วยกันและรหัสก็เต็มไปด้วยวัตถุ DOM จำนวนมาก โครงสร้างรหัสนี้สับสนมาก ด้วยเฟรมเวิร์ก MVVM คุณสามารถแยกรหัส JS และรหัส HTML และส่วนการทำงานของข้อมูลนั้นง่ายกว่า คุณจะต้องเชื่อมโยงกับแอตทริบิวต์แท็กที่เกี่ยวข้องเพื่อแสดงผ่านไวยากรณ์ที่สอดคล้องกัน (-บินด์ข้อมูล) ซึ่งจะช่วยเพิ่มความเร็วในการพัฒนา
Knockoutjs เป็นกรอบ MVVM ในความเป็นจริงแทนที่จะเรียกเฟรมเวิร์กมันควรจะเป็นไลบรารีคลาส MVVM เนื่องจากไม่มีเฟรมเวิร์ก MVVM จึงเป็นแนวคิดที่ค่อนข้าง "หนัก" ซึ่งควรมีคุณสมบัติเช่นการกำหนดเส้นทาง อย่างไรก็ตามไม่มีสิ่งที่น่าพิศวง ในการเปรียบเทียบ AngularJs ควรเรียกว่ากรอบ MVVM ที่เหมาะสมกว่า
ฟังก์ชั่นหลักที่นำมาใช้โดย KnockoutJs มีดังนี้:
การเชื่อมโยงที่ประกาศ: ใช้ไวยากรณ์อย่างง่ายเพื่อเชื่อมโยงข้อมูลโมเดลเข้ากับองค์ประกอบ DOM นั่นคือไวยากรณ์ "bind-bind"
การติดตามการพึ่งพา: สร้างความสัมพันธ์ระหว่างข้อมูลแบบจำลองสำหรับการแปลงและข้อมูลร่วม ตัวอย่างเช่นราคารวมของผลิตภัณฑ์คือผลรวมของราคาของแต่ละรายการผลิตภัณฑ์ ในเวลานี้ราคารวมของผลิตภัณฑ์และรายการผลิตภัณฑ์สามารถใช้เพื่อสร้างความสัมพันธ์โดยใช้ฟังก์ชั่นการติดตามการพึ่งพา นั่นคือมันได้มาจากผลรวมของราคารวมของสินค้าแต่ละรายการ ความสัมพันธ์นี้ทำโดยฟังก์ชั่นที่คำนวณได้ใน KnockoutJs
การรีเฟรช UI อัตโนมัติ: เมื่อสถานะโมเดลของคุณเปลี่ยนแปลงอินเตอร์เฟส UI จะได้รับการอัปเดตโดยอัตโนมัติ สิ่งนี้ทำโดยฟังก์ชั่นที่สังเกตได้
Templating: เขียน UIs Nestable ที่ซับซ้อนอย่างรวดเร็วสำหรับข้อมูลโมเดลของคุณ คล้ายกับแนวคิดของเทมเพลตใน WPF
ต่อไปเราใช้ตัวอย่างเฉพาะเพื่อเข้าใจการใช้งานที่น่าพิศวงอย่างรวดเร็ว
3. การประกาศผลผูกพัน
มาดูกันว่าจะใช้ไวยากรณ์ข้อมูลข้อมูลในการ knockoutjs เพื่อผูกข้อมูลโมเดลกับองค์ประกอบ DOM
1. การผูกทางเดียว
<! doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> demo1-one-way binding </title> <script type = "javascript" src = "uploads/rs/376/pbcx3e1 <body> <!-การผูกทางเดียว-> <div> <p> ชื่อแรก: <strong data-bind = "text: firstName"> </strong> </p> <p> นามสกุล: <strong data-bind = "text: lastName"> </strong> </p> /> </p> </div> <!-สคริปต์นี้ควรวางไว้ในไฟล์ JS ที่สอดคล้องกันในโครงการจริงจากนั้นอ้างอิงใน HTML ผ่านแท็กสคริปต์-> <!-รหัส JS เป็นส่วนตรรกะทางธุรกิจ this.firstname = "Tommy"; this.lastName = "li"; } ko.applybindings (ใหม่ ViewModel ()); </script> </body> </html>
2. ตัวอย่างข้างต้นจะเสร็จสิ้นการดำเนินการทางเดียวเท่านั้น นั่นคือในตัวอย่างข้างต้นคุณจะพบว่าเมื่อเปลี่ยนค่าในแท็กอินพุตและออกจากโฟกัสค่าข้างต้นจะไม่ได้รับการอัปเดต ในความเป็นจริงฟังก์ชั่นการอัปเดตอัตโนมัติใน KnockoutJS จะไม่ถูกเพิ่มโดยอัตโนมัติและต้องรองรับฟังก์ชั่นที่เกี่ยวข้อง ฟังก์ชั่นนี้เป็นฟังก์ชันที่สังเกตได้ มาดูตัวอย่างของการผูกสองทาง:
<! doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> demo2-bi-directional binding </title> <script type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-การผูกสองทิศทาง-> <div> <p> ชื่อแรก: LastName "> </strong> </p> <p> ชื่อแรก: <อินพุต data-bind =" value: firstName "/> </p> <p> นามสกุล: <อินพุต data-bind =" value: lastName "/> </p> </div> <script type =" text/javascript " this.lastName = ko.observable ("li"); } ko.applybindings (ใหม่ ViewModel ()); </script> </body> </html>4. พึ่งพาการติดตาม
ถัดไปมาดูวิธีการใช้ฟังก์ชั่นที่คำนวณใน KO เพื่อติดตามการพึ่งพาให้เสร็จสมบูรณ์ รหัสการใช้งานของตัวอย่างเฉพาะมีดังนี้:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8"/>> type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <! LastName "> </strong> </p> <p> ชื่อแรก: <อินพุต data-bind =" value: firstName "/> </p> <p> ชื่อสุดท้าย: <อินพุต data-bind =" value: lastName "/> </p> <p> ชื่อเต็ม: </div> <script type = "text/javascript"> function viewModel () {this.firstname = ko.observable ("tommy"); this.lastName = ko.observable ("li"); // ขึ้นอยู่กับการติดตาม this.fullName = ko.computed (function () {return this.firstname () + "" + this.lastName ();}, สิ่งนี้); // เปลี่ยนค่าของการสังเกตผ่านรหัส this.capitalizeLastName = function () {this.lastName (this.lastName (). touppercase ()); - } ko.applybindings (ใหม่ ViewModel ()); </script> </body> </html>จากนั้นลองมาดูตัวอย่างของการใช้การผูกมัดและการพึ่งพาเพื่อติดตามจุดที่ซับซ้อน รหัสตัวอย่างเฉพาะมีดังนี้:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8"/>> src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <body> <tbody data-bind = "foreach: รายการ"> <tr> <td data-bind = "text: product.name"> </td> <td> <เลือก data-bind = "ตัวเลือก: [1,2,3,4,5,5,6] ค่า: จำนวน"> </select> </td> <td data-bind = " data-bind = "คลิก: $ root.remove"> ลบ </a> </td> </tbor> </table> <h3> ราคาสั่งซื้อ: <span data-bind = "ข้อความ: ราคา"> </pan> </h3> <button data-bind = "คลิก: addComputer"> เพิ่มคอมพิวเตอร์ }, {ชื่อ: "xiaomi note", ราคา: 999}, {ชื่อ: "สมุดบันทึกแมโคร", ราคา: 4999}]; // คำสั่งซื้อฟังก์ชันฟังก์ชัน () {var self = this; this.items = ko.observablearray ([รายการใหม่ (ผลิตภัณฑ์ [0], 1), รายการใหม่ (ผลิตภัณฑ์ [1], 2)]); // ราคาคำสั่งซื้อทั้งหมดนี้ price = ko.computed (function () {var p = 0; สำหรับ (var i = 0; i <self.items (). ความยาว; i ++) {var item = self.items () [i]; p+= item.product.price.price * this.remove = function (item) {self.items.remove (รายการ); - this.addComputer = function () {self.items.push (รายการใหม่ (ผลิตภัณฑ์ [2], 1)); - } // รายการรายการรายการรายการ (ผลิตภัณฑ์จำนวน) {var self = this; this.product = ผลิตภัณฑ์; this.amount = ko.observable (จำนวน); // ราคารายการรวมทั้งหมด this.subtotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applybindings (ลำดับใหม่ ()); </script> </body> </html>V. เทมเพลต
หลังจากอ่านตัวอย่างข้างต้นคุณควรรู้สึกว่ามันเป็นเรื่องง่ายมากที่จะเริ่มต้นกับ KO (ตัวย่อของ KnockoutJs) เนื่องจากไวยากรณ์นั้นง่ายต่อการเข้าใจลองมาดูการใช้เทมเพลตใน KO
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" เนื้อหา = "html; charset = utf-8"/>> type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <! <! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <strong data-bind = "text: age"> </strong> </p> </div>-> <div data-bind = "เทมเพลต: 'personTemplate'"> </div> <script id = "personTemplate" type = "html"> <p> ชื่อ: อายุ "> </strong> </p> </script> <script type =" text/javascript "> var viewModel = {ชื่อ: ko.observable ('tommy'), อายุ: ko.observable (28), makeolder: function () - KO.ApplyBindings (ViewModel); </script> </body> </html> <! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" เนื้อหา = "html; charset = utf-8"/>> type = "text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> foreach: people} "> </div> <script type =" text/html "id =" persontemplate "> <h3 data-bind =" text: name "> </h3> <p> อายุ: <span data-bind =" text: age "> </span> </p> 'Tommy', อายุ: 27}, {ชื่อ: 'Frank', อายุ: 33}]; } ko.applybindings (ใหม่ myViewModel ()); </script> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้เทมเพลตโปรดดูเอกสารอย่างเป็นทางการ: http://knockoutjs.com/documentation/template-binding.html บทความนี้แสดงเฉพาะการใช้เทมเพลตใน 2
6. สรุป
ณ จุดนี้เนื้อหาของการเริ่มต้นอย่างรวดเร็วของ Knockoutjs สิ้นสุดลง เราจะยังคงแนะนำเนื้อหา KO ให้คุณในบทความถัดไป เนื้อหาของบทความถัดไปจะแนะนำวิธีการใช้ KO เพื่อสร้างโครงการจริง อย่าพลาด