ในบทความประสบการณ์การเรียนรู้ครั้งแรกของ KO ที่น่าพิศวงก่อนหน้านี้ (I) KO มีการกล่าวถึงวิธีการเชื่อมโยง data-bind = "xx: oo" ใน KO ไม่เพียง แต่ผูกข้อความค่านิยม ฯลฯ แต่ยังผูกคุณลักษณะที่มองเห็นได้สไตล์และลักษณะที่ปรากฏอื่น ๆ การรวมกลุ่มแฟนซีต่างๆจะตอบสนองจินตนาการของคุณอย่างแน่นอน
การพูดคุยสั้น ๆ ต่อไปนี้เกี่ยวกับการใช้การผูกที่หลากหลายซึ่งส่วนใหญ่แบ่งออกเป็นสามประเภท: การเป็นตัวแทนกระบวนการและปฏิสัมพันธ์ตามคุณสมบัติที่ถูกผูกไว้
คุณลักษณะประสิทธิภาพ
คุณลักษณะการเชื่อมโยงของคลาสการนำเสนอรวมถึงการมองเห็นข้อความ, HTML, CSS, สไตล์และ attr ยกเว้นคลาสที่ CSS แสดงถึง CSS ทุกอย่างอื่นเข้าใจง่าย แน่นอนว่าการตั้งชื่อในสไตล์ควรสอดคล้องกับ JS และควรลบออก - เปลี่ยนเป็นการตั้งชื่ออูฐดังที่แสดงด้านล่าง:
<!-รหัส html-> <div data-bind = "มองเห็นได้: ควรจะเป็น stowMessage"> คุณจะเห็นข้อความนี้เฉพาะเมื่อ "ควรจะแสดงข้อความ" มีค่าที่แท้จริง </div> <div> ข้อความของวันนี้คือ: <span data-bind = "text: myMessage"> Profit Warning: CurrentProfit () <0} "> การทดสอบการเชื่อมโยงคลาส CSS </div> <div data-bind =" สไตล์: {color: currentprofit () <0? {ควร SHOWMESSAGE: KO.ObServable (จริง), // ข้อความเริ่มต้น visiblemyMessage: ko.observable (), // ตอนแรก blankdetails: ko.observable (), // blankcurrentprofit: ko.observable (150000) ko.observable (150000), // ค่าบวก, ดังนั้นเริ่มแรก blackurl: ko.observable ("year-end.html"), urltitle: ko.observable ("รายงานรวมถึงสถิติปีสุดท้าย")}; ko.applybindings (Viewmodel); // ใช้ bindsเอฟเฟกต์เป็นเช่นนี้:
ดังที่ได้กล่าวไว้ในบทความก่อนหน้านอกเหนือจากแอตทริบิวต์แต่ละตัวของ XXOO คุณยังสามารถผ่านวัตถุ JSON ได้นั่นคือคุณสามารถรวมแอตทริบิวต์ที่มีผลผูกพันเช่น:
<!-รหัส html-> <div data-bind = "{มองเห็นได้: ควรจะให้บริการข้อความ, ข้อความ: myMessage, css: {profitwarning: currentprofit () <0}}"> คุณจะเห็นข้อความนี้เฉพาะเมื่อ "แน่นอนว่าเอฟเฟกต์เป็นเช่นนี้:
การตั้งค่าของคลาสการนำเสนอนั้นค่อนข้างง่าย สิ่งหนึ่งที่ควรทราบคือคลาสการนำเสนอจำนวนมากไม่จำเป็นต้องเปลี่ยนแปลงแบบไดนามิก ในเวลานี้คุณสามารถใช้การตั้งค่า ViewModel เพื่อให้ได้การเริ่มต้นข้อมูลส่วนกลางของข้อมูล แต่ไม่ได้ตั้งค่าให้เป็นสิ่งที่สังเกตได้เช่น:
// js codevar viewModel = {ishedShowMessage: ko.observable (จริง), // ข้อความเริ่มแรก visiblemessage: 'ข้อความนี้ไม่จำเป็นต้องมีการอัปเดตแบบไดนามิก' // ตอนแรกว่างเปล่า};แอตทริบิวต์คลาสกระบวนการ
คลาสกระบวนการรวมถึง foreach, ถ้า, ifnot, กับและส่วนประกอบ "ขั้นสูง" การผูก " ถ้าและถ้าไม่คล้ายกับที่มองเห็นได้ ความแตกต่างคือ: หากจะลบส่วนประกอบที่เกี่ยวข้องโดยตรงออกจาก DOM ในขณะที่มองเห็นการควบคุมที่ซ่อนอยู่เท่านั้นและส่วนประกอบยังคงอยู่ใน DOM ด้วยเอฟเฟกต์เดียวกับใน JS ซึ่งจะขยายขอบเขตห่วงโซ่ กล่าวง่ายๆคือการเพิ่ม 'คำนำหน้า' ก่อนตัวแปร ที่นี่ฉันจะแนะนำ foreach เท่านั้นและส่วนประกอบจะถูกวางร่วมกับการผูกแม่แบบ
ตรวจสอบรหัส:
<!-รหัส HTML-> <p> ทดสอบ foreach binding </p> <ul data-bind = "foreach: people"> <li> ไม่ <span data-bind = "ข้อความ: $ index" </pan> ชื่อของผู้คน: <span data-bind = "text: name"> </span> <a href = "#" href = "#" data-bind = "คลิก: ลบ"> ลบ </a> </li></ul> <อินพุตประเภท = "ปุ่ม" data-bind = "คลิก: addpeople" value = "เพิ่ม"/> var listModel = function () {// ตั้งค่าของอาร์เรย์คน ใช้ foreach เพื่อสำรวจวัตถุอาเรย์ // ul, หลี่สอดคล้องกับเด็กของผู้คนและผู้คน ดังนั้นเมื่อมีผลผูกพันภายใน Li ภายในขอบเขตของเด็ก {ชื่อ ... } ในการเรียก removepeople นอกผู้คนต้องใช้ $ parent // หากเรียกว่าลบภายในสิ่งนี้ในการลบคือ {ชื่อ ... } ที่สอดคล้องกับรายการ LI ปัจจุบันและขอบเขตคือโดเมนปัจจุบันไม่จำเป็นต้องมี $ PARTER this.people = ko.observablearray ([{ชื่อ: "Mark Zake", ลบ: function () {that.people.remove (นี่); // หมายเหตุวัตถุปัจจุบัน (นั่นคือ {ชื่อ ... }) และขอบเขตไม่ต้องกังวลเกี่ยวกับแท็ก html {That.people.remove (นี่);}}, {ชื่อ: "Green Deny", ลบ: function () {that.people.remove (นี่);}}]); // adpeople เรียกวิธีการในระดับเดียวกันของคนภายใน สิ่งนี้จะเปลี่ยนไปและสิ่งนี้ควรบันทึกล่วงหน้าและส่งผ่าน var that = this; this.addpeople = function () {that.people.push ({ชื่อ: วันที่ใหม่ (). todatestring (), ลบ: ฟังก์ชัน () {that.people.remove สิ่งที่คุณต้องการดำเนินการคือ listmodel.people.remove (a.parent) this.removepeople = function () {that.people.remove (นี่);}}; ko.applybindings (ใหม่ listmodel ());สิ่งที่ง่ายกว่าที่จะยุ่งกับที่นี่คือการติดต่อแบบลำดับชั้นระหว่างโหนด DOM และ ViewModel ขั้นแรกให้ใช้ foreach ที่มีผลผูกพันกับ UL นั่นคือ LI แต่ละตัวสอดคล้องกับเด็กแต่ละคน หลังจากนี้สอดคล้องกับมันคุณสามารถเข้าใจได้ตามกฎขอบเขตของ JS เมื่อพูดถึงขอบเขตฉันต้องพูดถึงเรื่องนี้ เมื่อคำพูดไปฉันปฏิบัติต่อสิ่งนี้ราวกับว่าฉันเป็นรักแรกของฉันและสิ่งนี้หลอกฉันหลายพันครั้ง ที่นี่ Xiaojia ได้เพิ่มฟังก์ชั่นลบลงในเวอร์ชันอย่างเป็นทางการซึ่งง่ายต่อการสอดคล้องกับ removepeople อย่างเป็นทางการ สำหรับตัวแปรเช่น $ index และ $ parent เพียงแค่เข้าใจพวกเขาอย่างแท้จริง
คุณลักษณะคลาสปฏิสัมพันธ์
ในที่สุดก็ถึงเวลาที่จะได้รับประเด็น เหตุผลที่สำคัญที่สุดสำหรับการใช้ KO คือการจัดการกับปัญหาการนำเสนอ UI แบบโต้ตอบแบบไดนามิก ที่นี่เราจะแนะนำการผูกบางอย่างที่เกี่ยวข้องกับแบบฟอร์ม
(1) คลิกที่มีผล
ไวยากรณ์: data-bind = "คลิก: clickhandler" ฟังก์ชั่น ClickHandler ที่นี่อาจเป็นฟังก์ชั่นใด ๆ ไม่จำเป็นต้องเป็นฟังก์ชั่นใน ViewModel ตราบใดที่สามารถอ้างอิงได้ มีบางสิ่งที่ควรทราบเกี่ยวกับเหตุการณ์คลิก:
1. พารามิเตอร์ผ่าน KO จะส่งส่วนประกอบปัจจุบันเป็นพารามิเตอร์แรกไปยังฟังก์ชัน ClickHandler โดยค่าเริ่มต้น ให้ความสนใจกับบริบทที่มีผลผูกพันในปัจจุบันที่นี่ ตัวอย่างเช่นในสภาพแวดล้อมที่มีส่วนประกอบที่ส่งคืนจะกลายเป็นส่วนประกอบแทนส่วนประกอบปัจจุบันที่คุณต้องการ หากคุณจำเป็นต้องผ่านพารามิเตอร์เหตุการณ์ให้ส่งเหตุการณ์เป็นพารามิเตอร์ที่สอง หากคุณต้องการผ่านพารามิเตอร์เพิ่มเติมคุณต้องห่อด้วยฟังก์ชั่น ชอบ:
<ปุ่ม data-bind = "คลิก: ฟังก์ชั่น (ข้อมูล, เหตุการณ์) {myFunction ('param1', 'param2', ข้อมูล, เหตุการณ์)}"> คลิกฉัน </pution>2. การตั้งค่าพฤติกรรมเริ่มต้น (เช่นลิงก์)
KO ถูกห้ามโดยพฤติกรรมของเหตุการณ์เริ่มต้นและเรามักจะผูกกิจกรรมคลิกสำหรับลิงก์และจะไม่ปล่อยให้พวกเขากระโดด อย่างไรก็ตามหากคุณต้องเปิดใช้งานเพียงแค่ส่งคืนจริงใน clickhandler
3. ฟอง
KO ได้รับอนุญาตให้ฟองโดยค่าเริ่มต้น คุณสามารถตั้งค่าเหตุการณ์คลิกไม่ให้ฟองโดย data-bind = "คลิก: clickhandler, clickbubble: false"
(2) การผูกมัดเหตุการณ์
KO จัดเตรียมอินเทอร์เฟซนี้สำหรับผู้ใช้ในการปรับแต่งเหตุการณ์ที่มีผลผูกพัน เกี่ยวกับการผ่านพารามิเตอร์พฤติกรรมเริ่มต้นเดือด ฯลฯ เช่นเดียวกับการคลิกที่มีผลผูกพันใช้กรณี:
<div> <div data-bind = "เหตุการณ์: {mouseover: enabledetails, mouseout: disabledetails}"> เมาส์เหนือฉัน </div> <div data-bind = "มองเห็นได้: รายละเอียด"> รายละเอียด </div> </div> {this.detailsenabled (true);}, disabledetails: function () {this.detailsenabled (false);}}; ko.applybindings (viewModel); </script>(3) ส่งการผูกมัด
ส่วนใหญ่จะใช้ในการทำงานแบบฟอร์มการตรวจสอบบางอย่าง KO จะบล็อกการดำเนินการแบบฟอร์มการส่งเริ่มต้นและโอนไปยังฟังก์ชันการส่งที่ถูกส่ง เมื่อคุณต้องการส่งในอนาคตให้ส่งคืนจริงในเหตุการณ์ที่มีผลผูกพัน
PS: ทำไมไม่ใช้กิจกรรมคลิกในแบบฟอร์มเพื่อจัดการกับมัน? เนื่องจากการส่งได้รับการออกแบบมาเพื่อจัดการกับเหตุการณ์การส่งจึงสามารถยอมรับการดำเนินการส่งเช่นการคืนค่าการขนส่ง แต่คลิกไม่สามารถ
(4) ค่าถูกผูกไว้กับ textInput
ค่าการเชื่อมโยงและ textInput ในกล่องอินพุตดูคล้ายกัน แต่ขอแนะนำให้ใช้เหตุการณ์ textInput สำหรับการเชื่อมโยงเนื่องจาก TextInput เป็นสิ่งใหม่ที่ใช้โดยเฉพาะเพื่อจัดการเหตุการณ์อินพุต ดังที่คุณเห็นในบทความก่อนหน้านี้เมื่อใช้อินพุตการเชื่อมโยงค่า (ซ้าย) การโฟกัสจะต้องถูกย้ายออกจากกล่องอินพุตก่อนที่จะมีการอัปเดตในขณะที่ TextInput (ขวา) จะได้รับการอัปเดตทันที
แม้ว่าการเชื่อมโยงค่ายังสามารถบรรลุผลเช่นเดียวกับ textInput โดยการตั้งค่า data-bind = "{value: price, valueUpdate: 'Afterkeydown'}" แต่สิ่งนี้ไม่สามารถใช้งานได้กับ textInput ในเบราว์เซอร์
(5) ตัวเลือกที่มีผลผูกพัน (SelectedOptions)
ในรายการดรอปดาวน์ตัวเลือกสามารถใช้เพื่อผูกค่าของเด็ก เด็กสามารถเป็นทั้งสตริงหรือวัตถุ JS บทความก่อนหน้านี้ ([การเดินทางประสบการณ์การเรียนรู้การเรียนรู้ที่น่าพิศวง] (1) ประสบการณ์ครั้งแรกของ KO) แสดงสตริงและครั้งนี้ฉันจะส่งต่อวัตถุ:
รหัส:
<p> ประเทศของคุณ: <เลือก data-bind = "ตัวเลือก: AvailableCountries, OptionStext: 'CountryName', ค่า: SelectedCountry, OptionScaption: 'เลือก ... '"> </select> </p> <divata-bind = "selectedCountry"> <! SelectedCountry (). CountryPopulation: 'ไม่ทราบ' "> </span>. </div> <script type =" text/javascript "> // constructor สำหรับวัตถุที่มีสองคุณสมบัติประเทศ = ฟังก์ชั่น (ชื่อ, ประชากร) {this.countryName = name; ประเทศ ("สหราชอาณาจักร", 65000000), ประเทศใหม่ ("สหรัฐอเมริกา", 320000000), ประเทศใหม่ ("สวีเดน", 29000000)]), SelectedCountry: KO.observable () // ไม่มีอะไรเลือกโดยค่าเริ่มต้น};นี่คือตัวเลือกในการผูกตัวเลือกกล่องรายการและใช้ค่าเพื่อผูกรายการที่เลือก เนื่องจากตัวเลือกคือวัตถุ JS คุณต้องใช้ตัวเลือกข้อความเพื่อระบุการแสดงผลในกล่องรายการ OptionCaption หมายถึงค่าการแสดงผลเริ่มต้นเมื่อไม่มีการเลือกรายการ หากเราตั้งค่ากล่องรายการหลายรายการเราไม่สามารถใช้ค่าเพื่อผูกรายการที่เลือก ในเวลานี้ควรใช้ SelectOptions เพื่อผูกรายการที่เลือก
(6) การผูกอื่น ๆ : เปิด/ปิดใช้งาน, hasfocus, ตรวจสอบ, uniquename
เหตุการณ์เหล่านี้ใช้งานง่ายมากดังนั้นฉันจะไม่แนะนำรายละเอียด ชื่อ uniquename สุดท้ายใช้เพื่อตั้งค่าแอตทริบิวต์ชื่อที่ไม่ซ้ำกันของการควบคุมแบบฟอร์ม เมื่อแบบฟอร์มถูกส่งไปยังพื้นหลังมันจะไม่ถูกส่งไปยังพื้นหลังโดยไม่ต้องตั้งค่าของแอตทริบิวต์ชื่อดังนั้นจึงมีฟังก์ชั่นการเชื่อมโยงดังกล่าว มีผลกระทบที่พบบ่อยใน Hasfoucus ในเว็บไซต์ทางการ:
ชื่อ:
ชื่อ: Bert Bertington
คลิกชื่อเพื่อแก้ไข; คลิกที่อื่นเพื่อใช้การเปลี่ยนแปลง
การคลิกที่ชื่อด้านบนสามารถแก้ไขได้จากนั้นสูญเสียโฟกัสแล้วกลายเป็นข้อความธรรมดา เอฟเฟกต์นี้ค่อนข้างง่ายที่จะนำไปใช้กับ KO
สรุป
บทความนี้ส่วนใหญ่แนะนำ วิธีการใช้งานของการผูกที่หลากหลายใน knockoutjs การใช้วิธีการรวมกันของวิธีการผูกมัดเหล่านี้คุณสามารถสร้างหน้า UI ที่ต้องมีการโต้ตอบแบบไดนามิกมากขึ้น สิ่งที่สำคัญที่สุดในการใช้วิธีการเหล่านี้คือการจำไว้ว่าการผูกทั้งหมดเป็นวัตถุฟังก์ชันดังนั้นคุณสามารถทำงานได้โดยตรงใน HTML เพื่อให้โครงสร้างรหัส JS บางครั้งสามารถง่ายขึ้น
การสอนอย่างเป็นทางการ: http://knockoutjs.com/documentation/introduction.html