ทุกคนที่เล่น Knockoutjs รู้ว่ามีฟังก์ชั่นที่ทรงพลังที่เรียกว่า Component และหนึ่งในสิ่งที่ยอดเยี่ยมเกี่ยวกับองค์ประกอบนี้คือมันมี ViewModel และเทมเพลตของตัวเองเช่นต่อไปนี้:
KO.Components.Register ('Message-editor', {viewModel: function () {}, เทมเพลต: ""});เห็นได้ชัดว่า ViewModel เป็นพื้นที่ฟังก์ชั่นและเทมเพลตเป็นพื้นที่เทมเพลตและจากนั้นส่วนประกอบจะลงทะเบียนในการล้มลงผ่านฟังก์ชั่นการลงทะเบียน ให้เราสาธิตฟังก์ชั่นง่าย ๆ ด้านล่างซึ่งคือการแสดงความยาวความยาวของเนื้อหา "อินพุต" ปัจจุบันแบบไดนามิก
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> </meta charset = "utf-8"/> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'ส่วนประกอบ: "message-editor"'> </div> <script type = "text/javascript"> ko.Components.register ('Message-editor' '');}, เทมเพลต: 'ข้อความ: <อินพุต data-bind = "value: text"/>'+ '(ความยาว: <span data-bind = "ข้อความ: ข้อความ (). ความยาว"> </span>)'}); ko.applybindings ();โปรดดูรหัสนี้อย่างใกล้ชิด ส่วนประกอบปัจจุบันจะฉีดเทมเพลตเทมเพลตลงในแท็ก DIV ของ HTML และยังมีการเชื่อมโยงขององค์ประกอบข้อความในแท็กเทมเพลตนี้และแหล่งข้อมูลของนี้ (ข้อความ () ความยาว) เกิดขึ้นเป็น this.text ใน viewModel - ขวา. - - ด้วยการรวมกันของทั้งสองนี้ HTML สุดท้ายของเราจะแสดงดังนี้:
ต่อไปเราป้อนตัวเลขบางอย่างอย่างไม่เป็นทางการและย้ายเมาส์ออกไป ในเวลานี้เหตุการณ์การเปลี่ยนแปลงอินพุตจะถูกทริกเกอร์เช่นต่อไปนี้
มันไม่เจ๋งเหรอ? - - แน่นอนบางคนอาจถามว่าถ้าฉันให้ค่าเริ่มต้นเล็กน้อยเมื่ออินพุตถูกแสดงผล? - - ไม่เป็นไร? แน่นอนมันเป็นไปได้เช่นกัน ในเวลานี้เราสามารถกำหนดค่าโดยค่าเริ่มต้นในข้อมูลที่มีผลดีและก็โอเค - - ตัวอย่างเช่นต่อไปนี้คือ:
<body> <h4> อินสแตนซ์ที่สองการผ่านพารามิเตอร์ </h4> <div data-bind = 'ส่วนประกอบ: {name: "message-editor", params: {initialText: "Hello, World!" }} '> </div> <script type = "text/javaScript"> ko.components.register (' message-editor ', {viewModel: ฟังก์ชัน (params) {this.text = ko.observable (พารามิเตอร์ "params.initialText ||'); data-bind = "text: text (). ความยาว"> </span>) '}); ko.applybindings (); </script> </body>คุณจะเห็นได้ว่าในโค้ดด้านบนฉันเพิ่มคุณสมบัติข้อความเริ่มต้นลงในวัตถุพารามิเตอร์ในส่วนประกอบและในเวลานี้ฉันสามารถฉีดข้อความเริ่มต้นนี้ลงใน ViewModel ของเราแบบไดนามิกจากนั้นองค์ประกอบอินพุตและ Span ของเราสมัครรับข้อมูลการตรวจสอบข้อความนี้ใน ViewModel นี้ผ่านข้อมูลข้อมูล ในเวลานี้มีการดำเนินการอัปเดตแบบเรียลไทม์ ฉันแทบรอไม่ไหวที่จะดู ~
1: การวิเคราะห์ปัญหา
โอเคผ่านการสาธิตข้างต้นคุณอาจพบปัญหาสองประการต่อไปนี้ ปัญหาแรกคือมันมีพลังมาก ตราบใดที่คุณลงทะเบียนคุณไม่จำเป็นต้องใช้ ViewModel ผ่านทาง ApplyBindings ซึ่งจะตระหนักถึงการทำให้เป็นโมดูลของหน้าเว็บซึ่งสะดวกมาก ~ ดังนั้นปัญหานี้เป็นสิ่งที่ดี ปัญหาที่สองคือเนื้อหาในเทมเพลตเทมเพลตของเราอยู่ในรูปแบบของ "hard-coded" นั่นคือถ้ามีเนื้อหาจำนวนมากเช่น 100 บรรทัดและ 200 บรรทัดเราบ้าไปแล้วหรือไม่? - - ไม่ว่าคุณจะมีความสามารถแค่ไหนคุณก็ไม่สามารถแยกพวกเขาไปทีละคนได้ แม้ว่าคุณจะประกบกัน แต่ค่าบำรุงรักษาก็สูงเกินไป ดังนั้นคำถามคือวิธีเปลี่ยนเนื้อหาเทมเพลตแบบไดนามิก - - ตัวอย่างเช่นหน้าห้องสมุด Baidu ที่เราเห็นในความเป็นจริง - - ดังที่แสดงในรูปด้านล่าง:
มีโมดูลมากมายในหน้านี้เช่นสามฉันวนรอบข้างต้น ต้องมี HTML จำนวนมากในสามโมดูลนี้ ~~~
สอง: เทมเพลตการซื้อแบบไดนามิก
โดยปกติจะมีสองวิธีในการรับเนื้อหา HTML แบบไดนามิก สิ่งแรกคือต้องการ แน่นอนคุณต้องอ้างอิง JS ดังกล่าว ประการที่สองคือการเขียนเทมเพลตของพวกเขาใหม่ แน่นอนในบทความนี้สิ่งที่เราต้องทำคือการเขียนฟังก์ชั่น loadTemplate ใหม่ในส่วนประกอบแล้วแทนที่ตัวโหลด defaultloader มันไม่ง่ายมากเหรอ? - -
1. เขียนเมธอด LoadTemplate ใหม่
// ขั้นตอนที่ 1: เขียนเมธอด loadTemplate var templateFromUrlloader = {loadTemplate: ฟังก์ชั่น (ชื่อ, templateconfig, การโทรกลับ) {ถ้า (templateconfig.fromurl) {var fullurl = '/' + templateconfig.fromurl // ajax {ko.components.defaultloader.loadTemplate (ชื่อ, markupstring, callback);});} else {callback (null);}}}; // แทนที่ค่าเริ่มต้นดั้งเดิม2. ใส่รหัสยากลงในไฟล์ภายนอกตัวอย่างเช่นฉันสร้างไฟล์ใหม่ไฟล์. html
3. ลงทะเบียนส่วนประกอบแล้วอ้างถึงเส้นทางไฟล์ภายนอกบนแท็กเทมเพลตเช่น {fromUrl: 'file.html'} ต่อไปนี้
ko.components.register ('Message-editor', {viewModel: ฟังก์ชัน (params) {this.text = ko.observable (params && params.initialText || '');}, เทมเพลต: {fromurl: 'file.html'},});โอเคฟังก์ชั่นทั้งหมดพร้อม มาดูหน้าเพื่อดูว่ามันเป็นอย่างไร - -
ในที่สุดงานที่ยอดเยี่ยมก็เสร็จสิ้น ถูกต้อง? จากนั้นสามารถขยายไปยังตัวอย่างของ "ห้องสมุด Baidu" ที่แนะนำข้างต้น เราสามารถใส่ HTML ของแต่ละโมดูลลงในไฟล์แยกต่างหาก
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> </meta charset = "utf-8"/> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'ส่วนประกอบ: {ชื่อ: "message-editor", params: {initialText: "สวัสดี !!!" }} '> </div> <script type = "text/javascript"> // ขั้นตอนที่ 1: เขียนวิธี loadTemplate var templateFromurlloader = {loadTemplate: ฟังก์ชั่น (ชื่อ, templateconfig, callback) {if (templateconfig.fromurl) เนื้อหาไฟล์ภายนอก $ .get (fullurl, function (markupstring) {ko.components.defaultloader.loadTemplate (ชื่อ, markupstring, callback);});} else {callback (null);}}}; // แทนที่ค่าเริ่มต้นดั้งเดิม TemplateFromurlloaderko.components.loaders.unshift (TemplateFromurlloader); ko.components.register ('Message-editor', {viewModel: ฟังก์ชั่น (params) {this.text = ko.observable (พารามิเตอร์ },}); ko.applybindings (); </script> </body> </html>ข้างต้นเป็นวิธีการโหลดไฟล์ภายนอกแบบไดนามิกใน KnockoutJs เป็นวิธีการใช้งานของแหล่งข้อมูลแม่แบบในส่วนประกอบ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!