Bootstrap เป็นเฟรมเวิร์กส่วนหน้าเป็นสิ่งที่ดีสำหรับการปลดปล่อยนักพัฒนาเว็บ มันแสดงให้เห็นว่า UI นั้นสูงมากบรรยากาศและระดับไฮเอนด์ ในทางทฤษฎีคุณไม่จำเป็นต้องเขียนบรรทัด CSS เพียงเพิ่มแอตทริบิวต์ที่เหมาะสมลงในแท็ก
KnockoutJS เป็นกรอบ MVVM ที่ใช้งาน JavaScript ดีมาก. ตัวอย่างเช่นหลังจากเพิ่มหรือลดรายการข้อมูลรายการไม่จำเป็นต้องรีเฟรชส่วนควบคุมทั้งหมดหรือเขียน JS Addition และการลบโหนดด้วยตัวเอง เพียงกำหนดเทมเพลตและแอตทริบิวต์ที่ตรงตามคำจำกัดความของไวยากรณ์ พูดง่ายๆคือเราต้องให้ความสนใจกับการเข้าถึงข้อมูลเท่านั้น
1. บทนำสู่การน็อคเอาท์ js
1. Knockout.js และ MVVM
ทุกวันนี้เฟรมเวิร์กส่วนหน้าต่าง ๆ มากมายกำลังล้นหลามและพราว บางครั้งฉันต้องถอนหายใจว่าในฐานะโปรแกรมเมอร์นั้นยากมากมีเทคนิคที่ไม่มีที่สิ้นสุดในการเรียนรู้เสมอ มันจะสิ้นสุดเมื่อไหร่เว้นแต่คุณจะเปลี่ยน! ทะเลแห่งความทุกข์นั้นไร้ขอบเขตและไม่ว่าจะเป็นฝั่งเมื่อคุณมองย้อนกลับไปหรือไม่ก็ขึ้นอยู่กับคุณ!
Knockout.js เป็นเฟรมเวิร์กส่วนหน้าน้ำหนักเบาตามโหมด MVVM มันเบาแค่ไหน? ตามเวอร์ชันล่าสุด v3.4.0 ที่แสดงบนเว็บไซต์อย่างเป็นทางการมีเพียง 22kb มันสามารถจัดการการเชื่อมโยงระหว่างโมเดลข้อมูลและอินเตอร์เฟส DOM ในลักษณะที่เป็นมิตร สิ่งที่สำคัญที่สุดคือการเชื่อมโยงเป็นแบบสองทิศทาง กล่าวคือหากรูปแบบข้อมูลเปลี่ยนแปลงข้อมูลในอินเตอร์เฟส DOM จะเปลี่ยนไปตามนั้น ในทางกลับกันหากข้อมูลในอินเตอร์เฟส DOM เปลี่ยนไปโมเดลข้อมูลจะเปลี่ยนไปเช่นกัน สิ่งนี้สามารถลดปริมาณรหัสส่วนหน้าของเราได้อย่างมากและทำให้อินเทอร์เฟซของเราง่ายต่อการบำรุงรักษาและเราไม่จำเป็นต้องเขียนแบบจำลองข้อมูลการตรวจสอบเหตุการณ์จำนวนมากและการเปลี่ยนแปลงอินเทอร์เฟซ DOM อีกต่อไป บล็อกเกอร์จะแสดงให้เห็นถึงสองจุดนี้ตามตัวอย่างการใช้งานด้านล่าง
เว็บไซต์อย่างเป็นทางการของ Knockout.js: http://knockoutjs.com
ที่อยู่ที่น่า knockout.js ที่อยู่โอเพ่นซอร์ส: https://github.com/knockout/knockout
โหมด MVVM: นี่คือรูปแบบการออกแบบสำหรับการสร้างส่วนต่อประสานผู้ใช้ MVVM แบ่งออกเป็นสามชิ้น ได้แก่ โมเดลมุมมองและ ViewModel โมเดลเป็นแบบจำลองข้อมูลมุมมองของเราและ ViewModel เป็นแบบจำลองมุมมองที่ใช้เพื่อผูกโมเดลข้อมูลและองค์ประกอบ DOM ในมุมมอง หากคุณใช้ WPF และ Silverlight การทำความเข้าใจสิ่งนี้ไม่ควรเป็นปัญหา ไม่ใช่ปัญหาที่จะไม่ได้ใช้ หลังจากอ่านบทความนี้คุณจะมีความเข้าใจทั่วไป
2. ตัวอย่างที่ง่ายที่สุด
โดยทั่วไปถ้าคุณใช้สิ่งที่น่าพิศวง js ตั้งแต่เริ่มต้นคุณต้องทำอย่างน้อยสี่ส่วนต่อไปนี้
2.1. ไปที่เว็บไซต์อย่างเป็นทางการเพื่อดาวน์โหลดไฟล์ Knockout.js จากนั้นอ้างถึงหน้าดู
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script>
หมายเหตุ: Knockout.js ไม่ต้องการการสนับสนุน jQuery หากโครงการของคุณต้องการการดำเนินงานที่เกี่ยวข้องกับ jQuery โปรดดู jQuery; มิฉะนั้นอ้างอิงเฉพาะไฟล์ข้างต้น
2.2. กำหนด ViewModel
ViewModel คืออะไร? ในความเป็นจริงใน JS ดูเหมือนวัตถุ JSON เรากำหนด ViewModel:
var myViewModel = {ชื่อ: "lilei", อาชีพ: "วิศวกรซอฟต์แวร์",};2.3. กำหนดแท็กที่ผูกกับการผูกข้อมูลในมุมมองมุมมอง
<div> ชื่อ: <label data-bind = "text: name"> < /label> <br /> อาชีพ: <อินพุต type = "text" data-bind = "textInput: professional" /> </div>
หมายเหตุ: จำเป็นต้องใช้ textInput สำหรับข้อความที่สอดคล้องกับแท็กอินพุตในขณะที่ข้อความสำหรับข้อความสำหรับแท็กธรรมดาเป็นสิ่งจำเป็น
2.4. เปิดใช้งานการผูกมัด
หลังจากทำสามขั้นตอนข้างต้นคุณต้องเปิดใช้งานการผูกมัดของการน็อคเอาท์
KO.ApplyBindings (MyViewModel);
ด้วยการทำสี่ส่วนเหล่านี้การเชื่อมโยงข้อมูล ViewModel ที่ง่ายที่สุดจะถูกนำไปใช้โดยทั่วไป รับเอฟเฟกต์:
หากคุณระมัดระวังพอคุณจะพบว่าวิธี KO.ApplyBindings () มีพารามิเตอร์สองตัว ครั้งแรกคือ ViewModel ที่เราต้องผูกและสิ่งที่สองคืออะไร? จาก ko.applybindings (MyViewModel); เราจะเห็นว่าพารามิเตอร์ที่สองเป็นพารามิเตอร์เสริมซึ่งแสดงถึงขอบเขตของแท็กที่ถูกผูกไว้กับ ViewModel ตัวอย่างเช่นลองเปลี่ยนรหัสด้านบน:
<div> ชื่อ: <label id = "lb_name" data-bind = "text: name"> < /label> <br /> อาชีพ: <อินพุต type = "text" data-bind = "textInput: อาชีพ" /> < /div> ko.applyBindings
รับผลลัพธ์:
จากนี้เราจะเห็นได้ว่าพารามิเตอร์ที่สองกำหนดขอบเขตของการกระทำของ MyViewModel นั่นคือการเชื่อมโยงบนฉลากของ id = "LB_NAME" เท่านั้น หากพารามิเตอร์ที่สองเป็นฉลากคอนเทนเนอร์เช่น DIV นั่นหมายความว่าขอบเขตของการผูกเป็นป้ายย่อยทั้งหมดต่ำกว่า DIV
3. คุณลักษณะการตรวจสอบ
จากสี่ขั้นตอนข้างต้นเราไม่สามารถเห็นผลกระทบใด ๆ สิ่งที่เราเห็นไม่มีอะไรมากไปกว่าการผูกข้อมูลของวัตถุ JSON กับแท็ก HTML จุดนี้คืออะไร? ปัญหาง่าย ๆ หรือไม่? ไม่ต้องกังวลเป็นสักขีพยานในปาฏิหาริย์ทันที! ดังที่ได้กล่าวมาแล้วความสำคัญที่สำคัญที่สุดของการน่าพิศวงอยู่ในการผูกสองทาง แล้วจะบรรลุผลผูกพันสองทางของเราได้อย่างไร? คำตอบคือการตรวจสอบแอตทริบิวต์
ในสิ่งที่น่าพิศวงมีแอตทริบิวต์การตรวจสอบสามประการในแกนกลาง: Observables, Aderentobservables, Observablearray ความหมายของการสังเกตถูกแปลว่าเป็นการสังเกตและการสังเกต หากรู้สึกไม่เหมาะสมที่จะบอกว่ามันเป็นคุณลักษณะการสังเกตหรือคุณลักษณะการสังเกตเราจะเรียกมันว่าแอตทริบิวต์การตรวจสอบในขณะนี้
3.1. Observables: คุณสมบัติการตรวจสอบ
ลองเปลี่ยนตัวอย่างข้างต้นเป็นเรื่องนี้:
<head> <meta name = "viewport" content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/scripts data-bind = "text: name"> </label> <br/> อาชีพ: <input type = "text" data-bind = "textInput: professional"/> </div> <div> <อินพุต type = "text" id = "txt_testobservable"/> </div> ko.observable ("Lilei"), อาชีพ: "วิศวกรซอฟต์แวร์",}; // 2 เปิดใช้งานการเชื่อมโยง ko.applybindings (myViewModel); $ (function () {// ลงทะเบียนเหตุการณ์ textchange $ ("#txt_testobservable"). on ("อินพุต", function () {myViewModel.name ($ (นี้) .val ());ความหมายของประโยคนี้คือการเพิ่มคุณสมบัติชื่อของ ViewModel ลงในคุณสมบัติการตรวจสอบ คุณสมบัติชื่อจะต้องกลายเป็นคุณสมบัติการตรวจสอบ สิ่งมหัศจรรย์จะเกิดขึ้น มาดูกันเมื่อเราเขียน MyViewModel:
ชื่อเปลี่ยนจากคุณสมบัติดั้งเดิมเป็นวิธีการนั่นคือเมื่อเพิ่ม KO.observable () แล้วคุณสมบัติที่เกี่ยวข้องจะกลายเป็นวิธีการ ดังนั้นค่าและการกำหนดชื่อจะต้องจัดการโดยใช้ myViewModel.name () มาดูเอฟเฟกต์กันเถอะ:
รหัสสงสัย: เป็นที่ชัดเจนว่า myViewModel.name ($ (นี้) .val ()); ประโยคนี้กำหนดค่าของกล่องข้อความปัจจุบันให้กับคุณสมบัติชื่อ เนื่องจากอินเทอร์เฟซเชื่อมโยงคุณสมบัติชื่อค่าในฉลากจึงมีการเปลี่ยนแปลงตามลำดับ หรือคุณจะบอกว่าสิ่งนี้สามารถทำได้โดยใช้เหตุการณ์ textchange ตราบใดที่ค่าของกล่องข้อความปัจจุบันถูกกำหนดให้กับแท็กฉลากเอฟเฟกต์นี้สามารถทำได้ซึ่งไม่มีอะไรเลย อันที่จริงวิธีการเขียนของคุณยังสามารถบรรลุวัตถุประสงค์ได้ แต่ความสำคัญของแอตทริบิวต์การตรวจสอบของเราคือเมื่อค่าชื่อเปลี่ยนไปทุกที่อินเทอร์เฟซจะเปลี่ยนไปตามนั้นโดยไม่ต้องกำหนดค่าให้กับแท็กฉลากในทุกสถานที่ ใน JS คุณจะต้องมุ่งเน้นไปที่ myViewModel.name () มันยอดเยี่ยมมาก ~~
3.2. ขึ้นอยู่กับการบริการ: การตรวจสอบคุณสมบัติการพึ่งพา
หากคุณได้อ่านแอตทริบิวต์การตรวจสอบด้านบนคุณยังไม่พอใจ? มาดูการใช้แอตทริบิวต์การพึ่งพาการตรวจสอบ
ลองเปลี่ยนรหัสและดู:
<head> <meta name = "viewport" content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "scripts/scripts type = "text" data-bind = "textInput: name" /> <br /> อาชีพ: <อินพุต type = "text" data-bind = "textInput: อาชีพ" /> <br /> /> คำอธิบาย: <label data-bind = "text: des"> < /label> < /div> ko.observable ("lilei"), อาชีพ: ko.observable ("วิศวกรซอฟต์แวร์"),}; myViewModel.des = ko.dependentobservable (ฟังก์ชัน () {return "ฉันชื่อ -" + myviewmodel.name () + " เปิดใช้งาน KO.applyBindings (MyViewModel); </script> </body>มาดูเอฟเฟกต์กันเถอะ:
รหัสสงสัย: โดยการเพิ่มแอตทริบิวต์การพึ่งพาการตรวจสอบ KO.DependentObServable () ค่าของแอตทริบิวต์ DES สามารถตรวจสอบได้ในเวลาเดียวกันกับการเปลี่ยนแปลงชื่อและอาจารย์ หากมีการเปลี่ยนแปลงใด ๆ แท็กที่ถูกผูกไว้จะทำให้เกิดการเปลี่ยนแปลง ข้อได้เปรียบที่ใหญ่ที่สุดของเรื่องนี้คือการหลีกเลี่ยงปัญหาในการดำเนินงาน DOM โดย JS ซึ่งน่าสนใจ
3.3. Observablearray; ตรวจสอบอาร์เรย์
นอกเหนือจากสองข้างต้นแล้ว KO ยังรองรับการตรวจสอบวัตถุอาร์เรย์ ลองมาดูตัวอย่าง:
<head> <meta name = "viewport" content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jQuery-1.9.1.min.js"> </script> <script src = "~/scripts/scripts data-bind = "ตัวเลือก: deptarr, optionstext: 'name'"> </select> </div> <div> <อินพุต type = "text" id = "txt_testobservable"/> <อินพุต type = "ปุ่ม" id = "btn_test" vale = "แผนกใหม่"/> ชื่อ: 'r & d แผนก'}, {id: 2, ชื่อ: 'แผนกผู้ดูแลระบบ'}, {id: 3, ชื่อ: 'ฝ่ายกิจการมนุษย์'}]); var viewmodel = {deptarr: deptarr,}; ko.applybindings (viewmodel); var i = 4; {deptarr.push ({id: i ++, ชื่อ: $ ("#txt_testobservable"). val ()});});}); </script> </body>ตรวจสอบเอฟเฟกต์:
รหัสสงสัย: วิธีการข้างต้น ko.observablearray () เพิ่มการตรวจสอบวัตถุอาร์เรย์ กล่าวคือที่ใดก็ได้ใน JS ตราบใดที่การเปลี่ยนแปลงอาเรย์ถูกสร้างขึ้นกับวัตถุอาร์เรย์ Deptarr UI จะถูกกระตุ้นเพื่อให้สิ่งที่สอดคล้องกัน สิ่งหนึ่งที่ควรทราบคืออาร์เรย์การตรวจสอบเป็นวัตถุอาร์เรย์ที่ตรวจสอบแล้วและไม่สามารถตรวจสอบการเปลี่ยนแปลงคุณสมบัติของวัตถุลูกในวัตถุอาร์เรย์ได้ ตัวอย่างเช่นเราเปลี่ยนเหตุการณ์คลิกเป็นสิ่งนี้:
$ (function () {$ ("#btn_test") on ("คลิก", function () {deptarr [1] .name = "aaa";});});ผล:
นี่แสดงให้เห็นว่าการตรวจสอบอาร์เรย์จะตรวจสอบวัตถุอาร์เรย์เองและจะไม่ตรวจสอบการเปลี่ยนแปลงในแอตทริบิวต์ขององค์ประกอบในอาร์เรย์ หากคุณต้องการตรวจสอบการเปลี่ยนแปลงคุณสมบัติของวัตถุในข้อมูลคุณต้องใช้ ko.observable () สำหรับคุณสมบัติของวัตถุในข้อมูลและทั้งสองใช้ร่วมกัน หากคุณสนใจคุณสามารถลองได้
4. แอตทริบิวต์การเชื่อมต่อข้อมูลทั่วไปใน KO
ในด้านบนเราใช้แอตทริบิวต์ข้อมูลข้อมูลหลายข้อมูลดังนั้นคุณลักษณะที่ผูกมัดข้อมูลข้อมูลดังกล่าวมีจำนวนมากในสิ่งที่น่าพิศวง? ที่นี่เราแสดงรายการคุณสมบัติที่ใช้กันทั่วไป
4.1. ข้อความและอินพุตเท็กซ์
ข้อความตามชื่อหมายถึงข้อความ โดยทั่วไปแล้วแอตทริบิวต์การเชื่อมโยงนี้จะใช้เพื่อแสดงข้อความด้วยแท็กเช่น <lable>, <span>, <div> ฯลฯ แน่นอนถ้าคุณต้องการการเชื่อมโยงนี้สามารถใช้สำหรับแท็กใด ๆ โดยพื้นฐานแล้วไม่มีอะไรจะพูดเกี่ยวกับการใช้มัน หากไม่ได้ใช้ ko.observable () มันจะเป็นผลผูกพันคงที่มิฉะนั้นจะเป็นการเชื่อมโยงแบบไดนามิก
InputText ข้อความของแท็กอินพุตเทียบเท่ากับแอตทริบิวต์ค่าของแท็กอินพุต
<div> ชื่อ: <label data-bind = "text: name"> </label> <br/> อาชีพ: <อินพุต type = "text" data-bind = "textInput: อาชีพ"/> </div> //1.define viewModelvar myViewModel = {ชื่อ: ko.observable ("Lilei" เปิดใช้งานการเชื่อมโยง ko.applybindings (MyViewModel);4.2. ค่า
โดยทั่วไปคุณสมบัติการเชื่อมโยงนี้ใช้สำหรับแท็กอินพุตซึ่งโดยทั่วไปคล้ายกับอินพุตข้อความด้านบน แต่ค่านั้นได้มาตรฐานมากขึ้น
นอกจากนี้ยังใช้กับค่าเป็นพารามิเตอร์ valueUpdate ซึ่งระบุว่าการทำงานของอินเทอร์เฟซทำอย่างไรเมื่อมีการอัปเดตค่า ค่าหลักของ ValueUpdate รวมถึงการเปลี่ยนแปลง/keyup/keypress/afterkeydown ฯลฯ จะระบุค่าของ ViewModel ที่สอดคล้องกับค่าเมื่อการเปลี่ยนแปลงข้อความการหดตัวของแป้นพิมพ์การกดแป้นพิมพ์การกดแป้นพิมพ์การกดแป้นพิมพ์ ฯลฯ
ชื่อ: <อินพุต type = "text" data-bind = "ค่า: ชื่อ, valueUpdate: 'keyup'" /> <br /> var myViewModel = {ชื่อ: ko.observable ("lilei"),}; // 2 เปิดใช้งานการเชื่อมโยง ko.applybindings (MyViewModel);รหัสด้านบนระบุว่าแอตทริบิวต์ค่าของกล่องข้อความและแอตทริบิวต์ชื่อของ MyViewModel จะได้รับการปรับปรุงเมื่อคีย์บอร์ดถูกปิด
4.3. ตรวจสอบแล้ว
การตรวจสอบการเชื่อมโยงโดยทั่วไปใช้สำหรับช่องทำเครื่องหมายวิทยุและองค์ประกอบแบบฟอร์มอื่น ๆ ที่สามารถเลือกได้และค่าที่สอดคล้องกันคือประเภทบูล การใช้ค่านั้นคล้ายกันโดยทั่วไปดังนั้นฉันจะไม่ทำซ้ำ
4.4. เปิดใช้งาน
เปิดใช้งานการเชื่อมโยงโดยทั่วไปจะใช้เพื่อเปิดใช้งานองค์ประกอบฉลากและโดยทั่วไปจะใช้เพื่อเปิดใช้งานและปิดการใช้งานองค์ประกอบฟอร์ม ตรงกันข้ามกับการปิดใช้งานค่าที่สอดคล้องกันยังเป็นประเภทบูล
<div> <อินพุต type = "text" data-bind = "เปิดใช้งาน: ismen"/> </div> <script type = "text/javascript"> // 1.define viewModelVar myViewModel = {ชื่อ: ko.observable ("lilei") Ko.observable (40), Ismen: ko.observable (จริง)}; // 2 เปิดใช้งานการเชื่อมโยง ko.applybindings (myViewModel); myViewModel.ismen (false); </script>เนื่องจากคุณสมบัติ Ismen กลายเป็นเท็จกล่องข้อความที่เกี่ยวข้องทั้งหมดจะแสดงสถานะปิดใช้งาน
4.5. พิการ
ตรงกันข้ามกับการเปิดใช้งานการใช้งานคล้ายกับการเปิดใช้งาน
4.6. ตัวเลือก
ในด้านบนมีการใช้ตัวเลือกเมื่อใช้การเลือกการรวมซึ่งแสดงถึงชุดของตัวเลือกของแท็กที่เลือกและค่าที่สอดคล้องกันคืออาร์เรย์ซึ่งแสดงถึงแหล่งข้อมูลของกล่องดรอปดาวน์นี้ การตรวจสอบแหล่งข้อมูลนี้สามารถเปิดใช้งานได้โดยใช้ ObservableArray ดูด้านบนสำหรับการใช้งาน
4.7.html
การเชื่อมโยงข้อความคือการตั้งค่าและค่าของแท็ก innerText ในทำนองเดียวกันการผูก HTML ก็คือการตั้งค่าและค่าของ innerHTML ค่าที่สอดคล้องกันคือแท็ก HTML
4.8. CSS
การเชื่อม CSS คือการเพิ่มหรือลบหนึ่งรูปแบบหรือมากกว่า (คลาส) ไปยังองค์ประกอบ DOM ใช้รูปแบบ:
<style type = "text/css">. testbold {พื้นหลังสี: powderblue;} </style> <div data-bind = "css: {testbold: myviewmodel.name () == 'lilei'}"> aaaa </div> var myviewmodel = ko.observable ("วิศวกรซอฟต์แวร์"), อายุ: ko.observable (40)};div นี้จะแสดงสีพื้นหลัง
หากคุณต้องการเพิ่มหรือลบหลายสไตล์เพียงแค่เปลี่ยนเล็กน้อยตัวอย่างเช่น:
<div data-bind = "css: {testbold: myViewModel.name () == 'lilei', testBorder: myViewModel.profession () == 'PHP Engineer'}"> AAAA </div>4.9. สไตล์
หากฟังก์ชั่นของการเชื่อม CSS คือการเพิ่มหรือลบรูปแบบคลาสแบบไดนามิกลงในแท็กฟังก์ชั่นของการเชื่อมโยงสไตล์คือการเพิ่มหรือลบสไตล์ที่แน่นอนลงในแท็ก ตัวอย่างเช่น:
<div data-bind = "css: {พื้นหลังสี: myViewModel.name () == 'lilei'? 'สีแดง': 'White'}"> AAAA </div>หากคุณเพิ่มหรือลบหลาย ๆ วิธีการใช้การเชื่อม CSS
4.10, attr
การเชื่อมโยง ATTT ส่วนใหญ่ใช้เพื่อเพิ่มและลบแอตทริบิวต์หนึ่งหรือมากกว่า (รวมถึงแอตทริบิวต์ที่กำหนดเอง) ไปยังแท็กและคล้ายกับ CSS
4.11. คลิก
คลิกการเชื่อมโยงหมายถึงการเพิ่มวิธีการคลิกเหตุการณ์การคลิกไปยังองค์ประกอบ DOM ที่เกี่ยวข้อง สามารถใช้กับองค์ประกอบใด ๆ
<div> <อินพุต type = "button" value = "การทดสอบคลิกการเชื่อมโยง" data-bind = "คลิก: clickfunc" /> </div> var myViewModel = {clickfunc: function () {แจ้งเตือน ($ (event.currentTarget) .val ());}}; ko.applybindingsEvent.currentTarget แสดงถึงองค์ประกอบ DOM ที่คลิกในปัจจุบัน บางครั้งเพื่อความเรียบง่ายเราใช้ฟังก์ชั่นที่ไม่ระบุชื่อโดยตรงเพื่อผูกเช่น:
<div> <อินพุต type = "button" value = "ทดสอบคลิกการเชื่อมโยง" data-bind = "คลิก: function () {alert ('คลิก');}" /> </div>อย่างไรก็ตามวิธีการเขียน JS ลงใน HTML ทำให้การยอมรับบล็อกเกอร์เป็นเรื่องยากและพวกเขารู้สึกว่ามันค่อนข้างไม่สะดวกที่จะรักษาโดยเฉพาะอย่างยิ่งเมื่อตรรกะในเหตุการณ์การคลิกค่อนข้างซับซ้อน ดังนั้นหากไม่จำเป็นต้องไม่แนะนำให้เขียนฟังก์ชั่นนิรนามนี้โดยตรง
4.12. คนอื่น
สำหรับการเชื่อมโยงข้อมูลทั้งหมดคุณสามารถเห็นการแนะนำในเว็บไซต์ทางการและฉันจะไม่แสดงรายการทีละรายการ เมื่อคุณต้องการเพียงไปที่เว็บไซต์อย่างเป็นทางการเพื่อตรวจสอบ ดูการผูกทั้งหมดที่ระบุไว้ในเว็บไซต์ทางการ:
5. การเปลี่ยนแปลงและความสัมพันธ์ระหว่างวัตถุ JSON และคุณลักษณะการตรวจสอบ
เรารู้ว่าเพื่อหลีกเลี่ยงวิธีการนำเสนอโดยตรงในภาษาต่าง ๆ โดยทั่วไปเราใช้ข้อมูลรูปแบบ JSON เมื่อโต้ตอบกับส่วนหน้าและแบ็คเอนด์ เราใช้โมเดลข้อมูลที่ดึงมาจากแบ็คเอนด์ผ่านคำขอ HTTP ในการใช้คุณสมบัติบางอย่างของ KO ของเราเราต้องแปลงโมเดลข้อมูลธรรมดาเหล่านี้ให้เป็นคุณลักษณะการตรวจสอบของ KO ในทางกลับกันเราใช้คุณลักษณะการตรวจสอบของ KO และบางครั้งเราจำเป็นต้องแปลงแอตทริบิวต์เหล่านี้ให้เป็นข้อมูล JSON ทั่วไปและส่งผ่านไปยังพื้นหลัง แล้วจะบรรลุการแปลงนี้ได้อย่างไร?
5.1. แปลงวัตถุ JSON เป็น ViewModel
ตัวอย่างเช่นเราใช้วัตถุ JSON จากพื้นหลังจากนั้นเปลี่ยนเป็น ViewModel ของเราแล้วผูกไว้กับ DOM อินเตอร์เฟสของเรา
$ .ajax ({url: "/home/getData", type: "get", ข้อมูล: {}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {var ojson = data;}});เราส่งคำขอไปยังแบ็กเอนด์ใช้วัตถุ JSON กำหนดค่าให้กับ OJSON จากนั้นเราแปลง OJSON เป็น ViewModel วิธีที่ใช้งานง่ายที่สุดคือการแปลงด้วยตนเอง ตัวอย่างเช่นเราสามารถทำได้:
var myViewModeljson = {deptName: ko.observable (), deptlevel: ko.observable (), deptdesc: ko.observable ()}; ko.applybindings (myviewmodeljson);จากนั้นในความสำเร็จที่ AJAX ร้องขอ
ความสำเร็จ: ฟังก์ชั่น (ข้อมูลสถานะ) {var ojson = data; myViewModeljson.deptName (ojson.deptname); myViewModeljson.deptlevel (ojson.detplevel); myviewmodeljson.deptdesc (ojson.deptdesc);ด้วยวิธีนี้ผ่านการเชื่อมโยงด้วยตนเองการผูกมัดของวัตถุ JSON กับ ViewModel จะรับรู้ ข้อได้เปรียบของการทำเช่นนี้คือความยืดหยุ่นข้อเสียชัดเจนจำนวนรหัสแมนนวลมีขนาดใหญ่เกินไป
โชคดีที่ด้วยโอเพ่นซอร์สสากลของเรามีคนที่มาด้วยวิธีที่ดีกว่าเสมอ เราสามารถใช้ส่วนประกอบที่น่าพิศวงการทำแผนที่เพื่อช่วยให้เราแปลงวัตถุอินเตอร์เฟส JSON เป็น ViewModel
knockout.mapping ที่อยู่โอเพ่นซอร์ส: ดาวน์โหลด
ลองดูสั้น ๆ ว่ามันใช้งานหรือตัวอย่างด้านบน เราไม่จำเป็นต้องใช้คำจำกัดความของ ViewModel ใด ๆ ก่อนอื่นเราต้องอ้างถึง knockout.mapping.js
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping-latest.js"> </script>
หมายเหตุ: ที่นี่ knock.mapping-lastest.js ต้องวางไว้ด้านหลัง Knockout-3.4.0.min.js มิฉะนั้น ko.mapping ไม่สามารถเรียกได้
จากนั้นใช้โดยตรงในฟังก์ชั่นความสำเร็จ
ความสำเร็จ: ฟังก์ชั่น (ข้อมูลสถานะ) {var myViewModeljson2 = ko.mapping.fromjs (data); ko.applybindings (MyViewModeljson2);}มาดูเอฟเฟกต์:
รหัสสงสัย: วัตถุ JSON ที่ดึงมาจากพื้นหลังผ่านคำขอ AJAX จะถูกแปลงเป็น ViewModel อย่างสะดวกผ่าน ko.mapping.fromjs () มันไม่คมไหม? แน่นอนนอกเหนือจากการใช้งานนี้คุณยังสามารถอัปเดต ViewModel ที่มีอยู่และใช้ดังนี้:
var myViewModeljson = {deptName: ko.observable (), deptlevel: ko.observable (), deptdesc: ko.observable ()}; ko.applybindings (myviewmodeljson); {}, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล, สถานะ) {ko.mapping.fromjs (ข้อมูล, myViewModeljson)}});});ในความสำเร็จให้อัปเดต ViewModel of MyViewModeljson ตามค่าของข้อมูล
5.2. แปลง ViewModel เป็นวัตถุ JSON
ดังกล่าวข้างต้นว่าวัตถุ JSON จะถูกแปลงเป็น ViewModel ดังนั้นเราควรทำอย่างไรถ้าเราต้องการแปลง ViewModel เป็นวัตถุ JSON และส่งผ่านไปยังแบ็กเอนด์?
มีสองวิธีในการทำให้ล้มลง:
• ko.tojs (): แปลง ViewModel เป็นวัตถุ JSON
• ko.tojson (): แปลง ViewModel เป็นสตริง JSON แบบอนุกรม
ตัวอย่างเช่นรหัสของเรามีดังนี้:
$ (function () {var ojson1 = ko.tojs (myViewModeljson); var ojson2 = ko.tojson (myViewModeljson);}); var myviewmodeljson = {deptname: ko.observable ko.observable ("กลุ่มพัฒนา")}; ko.applybindings (MyViewModeljson);จากนั้นมาตรวจสอบค่าของ OJSON1 และ OJSON2:
รหัสสงสัย: ผ่านภาพด้านบนมันง่ายที่จะเข้าใจความแตกต่างระหว่างสองวิธี ควรสังเกตที่นี่ว่าวิธีการทั้งสองนี้ถูกสร้างขึ้นใน KO และไม่จำเป็นต้องได้รับการสนับสนุนจากองค์ประกอบการทำแผนที่
6. สร้างแอตทริบิวต์การผูกข้อมูลข้อมูลของคุณเอง
ฉันได้พูดคุยกันมากมายข้างต้นและฉันจะแนะนำการผูกพันและการตรวจสอบบางอย่างในความล้มเหลว ดังนั้นบางครั้งเราจำเป็นต้องปรับแต่งข้อผูกมัดข้อมูลของเราเช่น: <label data-bind = "myBind: name"> </label> ข้อกำหนดนี้มีประโยชน์อย่างยิ่งเมื่อห่อหุ้มส่วนประกอบ สามารถใช้งานได้หรือไม่? แน่นอน.
ในการพิศวงคุณสมบัติ KO.BindingHandlers มีให้เพื่อปรับแต่งคุณสมบัติที่ผูกมัดข้อมูล ไวยากรณ์ของมันมีดังนี้:
ko.bindinghandlers.myselect = {init: ฟังก์ชัน (องค์ประกอบ, valueaccessor, allbindingsaccessor, viewModel) {}, อัปเดต: ฟังก์ชั่น (องค์ประกอบ, valueAccessor, AllBindingSaccessor, ViewModel) {}};เพียงแค่ประกาศเช่นนี้แล้วคุณสามารถใช้การผูกมัดข้อมูลที่กำหนดเองในแท็ก HTML ของเรา
<div> <เลือก data-bind = "mySelect: $ root"> <optu ภาพ id = "1"> แผนก R&D </petion> <optup id = "2"> แผนกกิจการมนุษย์ </ตัวเลือก> <ตัวเลือก ID = "3"
MySelect เป็นคุณสมบัติการเชื่อมโยงที่กำหนดเองของเรา $ root สามารถเข้าใจได้ว่าเป็นการเริ่มต้นในขณะนี้ (แม้ว่าคำอธิบายนี้จะไม่เข้มงวดหากมีคำอธิบายที่สมเหตุสมผลกว่าโปรดอย่าลังเลที่จะแก้ไข)
รหัสข้อสงสัย: KO.BindingHandlers ข้างต้นสามารถใช้เพื่อใช้คุณสมบัติการเชื่อมโยงที่กำหนดเอง ต้องอธิบายสองจุด:
• init ตามชื่อหมายถึงเริ่มต้นการผูกมัดแบบกำหนดเอง มันมีพารามิเตอร์หลายตัว พารามิเตอร์สองตัวแรกมักใช้บ่อยขึ้น พารามิเตอร์แรกแสดงถึงองค์ประกอบ DOM ที่เริ่มต้นการเชื่อมโยงที่กำหนดเองและพารามิเตอร์ที่สองโดยทั่วไปจะใช้เพื่อส่งผ่านพารามิเตอร์ที่เริ่มต้น
•อัปเดตอัปเดตการโทรกลับเมื่อแอตทริบิวต์การตรวจสอบที่สอดคล้องกันเปลี่ยนวิธีนี้จะถูกป้อน หากไม่จำเป็นต้องโทรกลับวิธีนี้อาจไม่สามารถประกาศได้
ที่นี่บล็อกเกอร์จะอธิบายการใช้การผูกแบบกำหนดเองโดยย่อตามส่วนประกอบของกล่องแบบเลื่อนลงที่เขาได้แชร์
6.1. mutiselect ที่ง่ายที่สุด
โดยทั่วไปหากเราต้องการใช้ KO เพื่อห่อหุ้มส่วนประกอบทั่วไปบางอย่างเราจำเป็นต้องใช้ KO.BindingHandlers ของเรา บล็อกเกอร์จะหารือเกี่ยวกับวิธีการใช้ร่วมกับส่วนประกอบ Mutiselect
ก่อนอื่นประกาศ ko.bindinghandlers ที่กำหนดเองและเริ่มต้นแท็กเลือกของเราในเมธอด init
ko.bindinghandlers.myselect = {init: ฟังก์ชั่น (องค์ประกอบ, valueaccessor, allbindingsaccessor, viewModel) {$ (องค์ประกอบ) .Multiselect ();}, อัปเดต: ฟังก์ชั่น (องค์ประกอบ, valueAccessorจากนั้นใช้ในแท็กหน้า
<div style = "text-allign: center;"> <เลือก data-bind = "mySelect: $ root"> <optu ภาพ id = "1"> แผนก R&D </optup> <ตัวเลือก ID = "2"> แผนกกิจการมนุษย์ </opotion> <ตัวเลือก ID = "3"> ฝ่ายดูแล
ส่วนที่สามสุดท้ายเปิดใช้งานการผูกมัด
$ (function () {var multiselect = {}; ko.applyBindings (multiSelect);});หากคุณไม่จำเป็นต้องผ่านพารามิเตอร์คุณจะต้องผูก ViewModel ที่ว่างเปล่าเท่านั้น บางคนงงงวย แต่ส่วนที่สามไม่รู้สึกว่ามันใช้งานได้จริง ความเข้าใจของบล็อกเกอร์คือองค์ประกอบ DOM จำเป็นต้องใช้การผูกข้อมูลเพื่อผูกข้อมูลและต้องเปิดใช้งานการเชื่อมโยง KO ซึ่งก็คือ KO.ApplyBindings () ที่นี่
รับเอฟเฟกต์:
6.2. พารามิเตอร์ผ่าน
ขั้นตอนแรกคือการปรับแต่ง ko.bindinghandlers
ko.bindinghandlers.myselect = {init: ฟังก์ชั่น (องค์ประกอบ, valueaccessor, allbindingsaccessor, viewmodel) {var oparam = valueaCcessor (); $ (องค์ประกอบ). multiselect (oparam);}, อัปเดต: ฟังก์ชั่นขั้นตอนที่สองเหมือนกับข้างต้นใช้การเชื่อมโยงที่กำหนดเองนี้ในแท็ก HTML
ขั้นตอนที่ 3: ส่งผ่านพารามิเตอร์เมื่อเปิดใช้งานการเชื่อมโยง
$ (function () {var multiselect = {enableClickableOptGroups: จริง, // การยุบกลุ่ม onchange: ฟังก์ชั่น (ตัวเลือก, ตรวจสอบ) {การแจ้งเตือน ("เลือกเปลี่ยน");}}; ko.applybindings (multiselect);});ผ่านสามขั้นตอนเหล่านี้คุณสามารถส่งพารามิเตอร์ไปยังการเริ่มต้นของการกลายพันธุ์ของเรา:
รหัสค้นหา: พารามิเตอร์ที่สองของเหตุการณ์ init เรากล่าวว่าฟังก์ชั่นหลักของมันคือการรับพารามิเตอร์ที่ส่งจาก ViewModel ของเรา แต่ที่นี่เราจำเป็นต้องใช้เป็นวิธีการ เหตุใดจึงใช้เวลามากในการศึกษา!
2. ตัวอย่างแรกของการเพิ่มการลบการแก้ไขและการค้นหา
ณ จุดนี้สิ่งพื้นฐานได้ถูกวางในที่สุด ตอนแรกฉันวางแผนที่จะทำให้พวกเขาเสร็จสมบูรณ์ในบทความเดียว แต่ฉันไม่ได้คาดหวังว่าสิ่งพื้นฐานจะขยายออกไปมาก! ตัวอย่างของการเพิ่มการลบการแก้ไขและการตรวจสอบจะรวมอยู่ในบทความถัดไป Bootstary และ KnockoutJs รวมกันเพื่อให้ตระหนักถึงฟังก์ชั่นของการเพิ่มการลบการแก้ไขและการตรวจสอบ [2] ยินดีต้อนรับสู่การเรียนรู้และสื่อสารและแน่นอนคุณสามารถแนะนำได้!