เลือกไลบรารีที่ถูกต้อง
เป็นการยากมากที่จะสร้างแอพ JS โดยไม่มีเครื่องมือที่ดี JQuery เป็นเพียงไลบรารีสำหรับการใช้งาน DOM และไม่ได้ให้พื้นฐานสำหรับการสร้างแอพ นี่คือเหตุผลที่เราต้องการห้องสมุดพิเศษที่คล้ายกับ CANJS
CANJS เป็นไลบรารี MVC ที่มีน้ำหนักเบาที่มีเครื่องมือที่คุณต้องการในการสร้างแอพ JS
CANJS เป็นไลบรารี MVC ที่มีน้ำหนักเบาที่มีเครื่องมือที่คุณต้องการในการสร้างแอพ JS มันมีเฟรมเวิร์กพื้นฐานพร้อมโหมด MVC (Model-View-Control), การเชื่อมโยงเทมเพลตแบบไดนามิก, การสนับสนุนเส้นทางและความปลอดภัยของหน่วยความจำ นอกจากนี้ยังรองรับ jQuery, zepto, mootools, yui, dojo และมีส่วนขยายที่หลากหลายและปลั๊กอิน
ส่วนที่คุณจะเรียนรู้:
สร้างการควบคุมและเลเยอร์ดู (เทมเพลต UI) เพื่อแสดงรายชื่อติดต่อ
ใช้เลเยอร์โมเดลโมเดลเพื่อแสดงข้อมูล
ใช้ปลั๊กอินติดตั้งเพื่อจำลอง AJAX เพื่อส่งคืนข้อมูล
คุณต้องตื่นเต้น! มาเริ่มเขียนโค้ดกันเถอะ
สร้างโฟลเดอร์และ HTML ของคุณ
คุณสร้างโฟลเดอร์สำหรับแอปของคุณก่อนจากนั้นสร้างโฟลเดอร์ย่อย 4 รายการในไดเรกทอรี: CSS, JS, Views และ IMG ดังนี้:
ผู้ติดต่อ _Manager
CSS
JS
มุมมอง
IMG
บันทึกรหัสต่อไปนี้เป็น index.html:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> CANJS Contacts Manager </title>
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/contacts.css">
</head>
<body>
<div>
<div>
<div>
<H1> ผู้ติดต่อผู้จัดการ </h1>
</div>
</div>
<div>
<div>
<div>
<nav id = "ตัวกรอง"> </av>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "ผู้ติดต่อ"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
ที่ด้านล่างของหน้าคุณจะโหลด JS ที่ต้องการ (รวมถึงแอพของคุณ: contacts.js)
สามารถดาวน์โหลดไฟล์ CSS และรูปภาพที่ใช้ในบทช่วยสอนได้
ใช้มุมมองเพื่อสร้าง UI ของคุณ
มุมมองใช้เพื่อแสดงเทมเพลต UI ของแอปของคุณ CANJS รองรับเครื่องยนต์เทมเพลตที่หลากหลาย บทความนี้ใช้ EJS ซึ่งรวมถึงและสนับสนุนการเชื่อมโยงแบบไดนามิก
แท็กของเทมเพลต EJS นั้นคล้ายกับ HTML มากและสนับสนุนที่มีรหัส JS แท็กที่ใช้กันทั่วไปสามรายการมีดังนี้:
< % code %> ดำเนินการ js
< %= รหัส %> เรียกใช้งาน JS และเขียนผลลัพธ์ที่ไม่ได้ถูกบันทึกไว้ที่ HTML ที่ตำแหน่งปัจจุบัน
< %== รหัส %> ดำเนินการ JS และเขียนผลลัพธ์ที่หลบหนีไปยัง HTML ที่ตำแหน่งปัจจุบัน (สำหรับ templates ย่อย)
เทมเพลตสามารถโหลดได้จากแท็กไฟล์หรือสคริปต์และบทช่วยสอนนี้โหลดจากไฟล์ EJS
แสดงรายชื่อ
ในการสร้างผู้ติดต่อคุณต้องสร้างเทมเพลต EJS ก่อนและบันทึกรหัสต่อไปนี้เป็น contactslist.ejs ลงในโฟลเดอร์มุมมองของคุณ:
การคัดลอกรหัสมีดังนี้:
<ul>
< % รายการ (ผู้ติดต่อ, ฟังก์ชั่น (ติดต่อ) { %>
<li < %= (el)-> el.data ('ติดต่อ', ติดต่อ) %>>
<%== can.view.render ('views/contactview.ejs', {
ติดต่อ: ติดต่อหมวดหมู่: หมวดหมู่
-
</li>
-
</ul>
contactlists.ejs จะแสดงรายชื่อผู้ติดต่อ มาวิเคราะห์เทมเพลตนี้กันเถอะ:
การคัดลอกรหัสมีดังนี้:
< % รายการ (ผู้ติดต่อ, ฟังก์ชั่น (ติดต่อ) { %>
หากวิธีการโทรกลับในรายการรายการ () ใช้ร่วมกับรายการกับผู้สังเกตการณ์จะถูกเรียกซ้ำ ๆ โดยใช้การเชื่อมโยงแบบไดนามิกเมื่อข้อมูลของรายการเปลี่ยนแปลง
การคัดลอกรหัสมีดังนี้:
<li < %= (el)-> el.data ('ติดต่อ', ติดต่อ) %>>
รหัสด้านบนสร้าง <li> พร้อมข้อมูลการติดต่อผ่านวิธีการโทรกลับขององค์ประกอบ หลังจากวิธีการหลังจากลูกศรถูกดำเนินการข้อมูลของวัตถุ EL จะถูกตั้งค่าเป็นองค์ประกอบที่เกี่ยวข้อง
การคัดลอกรหัสมีดังนี้:
<%== can.view.render ('views/contactview.ejs', {
ติดต่อ: ติดต่อหมวดหมู่: หมวดหมู่
-
รหัสข้างต้นแสดงผล sub-template contactView.ejs เป็นบุคคลที่ติดต่อ can.view.render () ส่งคืน HTML ด้วยเทมเพลตและข้อมูลเป็นพารามิเตอร์
แสดงการติดต่อครั้งเดียว
เทอมย่อยเป็นวิธีที่ดีในการจัดระเบียบมุมมองลงในบล็อกที่จัดการได้ นอกจากนี้ยังทำให้เทมเพลตของคุณง่ายและง่ายต่อการใช้ซ้ำ เทมเพลตนี้จะใช้ในภายหลังในการสอนเพื่อสร้างผู้ติดต่อบันทึกรหัสต่อไปนี้เป็น contactView.ejs และป้อนโฟลเดอร์ Views:
การคัดลอกรหัสมีดังนี้:
<a href = "javascript: //"> <i> </i> </a>
<form>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<input type = "text" name = "name" placeholder = "เพิ่มชื่อ"
<%= contact.attr ('ชื่อ')? "value = '" + contact.name + "'": "class = 'ว่าง'" %>>
<เลือกชื่อ = "หมวดหมู่">
< % $ .Each (หมวดหมู่, ฟังก์ชั่น (i, หมวดหมู่) { %>
<ตัวเลือกค่า = "<%= category.data%>" <%= contact.category === category.data? "เลือก": "" %>>
< %= category.name %>
</petion>
-
</เลือก>
</div>
<div>
<label> ที่อยู่ </label>
<input type = "text" name = "ที่อยู่"
<%= contact.attr ('ที่อยู่')? "value = '" + contact.address + "'": "class = 'ว่าง'" %>>
<label> โทรศัพท์ </label>
<input type = "text" name = "phone"
<%= contact.attr ('โทรศัพท์')? "value = '" + contact.phone + "": "class =' ว่าง '" %>>
<label> อีเมล </label>
<input type = "text" name = "อีเมล"
<%= contact.attr ('อีเมล')? "value = '" + contact.email + "'": "class = 'ว่าง'" %>>
</div>
</div>
</form>
แอตทริบิวต์การติดต่อถูกวางไว้ในแท็ก <put> ซึ่งช่วยให้คุณสามารถแก้ไขและอัปเดตข้อมูลของผู้ใช้
ฟื้นฟูมุมมองของคุณ (วรรณกรรมที่ดี .. )
หากใช้ attr () ในระหว่างเทมเพลตการประมวลผล EJS รหัสรอบ ๆ จะถูกส่งไปยังตัวประมวลผลเหตุการณ์เพื่อตรวจสอบการเปลี่ยนแปลงในแอตทริบิวต์ที่เกี่ยวข้อง เมื่อแอตทริบิวต์เปลี่ยนแปลง UI ที่เกี่ยวข้องในแอพจะได้รับการอัปเดต ฟังก์ชั่นนี้ได้รับประโยชน์จากกลไกการเชื่อมโยงแบบไดนามิก การเชื่อมโยงแบบไดนามิก EJS เป็นตัวเลือกและจะเปิดใช้งานเฉพาะสำหรับแอตทริบิวต์ที่เกี่ยวข้องเมื่อใช้ attt ()
เราใช้แท็ก <put> ใน contactView.ejs เพื่อทำความเข้าใจการใช้งาน:
การคัดลอกรหัสมีดังนี้:
<input type = "text" name = "name" placeholder = "เพิ่มชื่อ"
<%= contact.attr ('ชื่อ')? "value = '" + contact.name + "'": "class = 'ว่าง'" %>>
รหัสในแท็กพิเศษจะถูกแปลงเป็นเหตุการณ์และผูกไว้กับแอตทริบิวต์ชื่อของผู้ติดต่อนี้ เมื่อแอตทริบิวต์การเปลี่ยนแปลงชื่อเหตุการณ์จะถูกทริกเกอร์และโครงสร้าง HTML จะได้รับการอัปเดต
ใช้ CAN.CONTROL เพื่อจัดการตรรกะทางธุรกิจ
CAN.CONTROL สร้างการควบคุมที่ไม่มีการรั่วไหลภายในและการควบคุมเต็มรูปแบบที่สามารถใช้ในการสร้างวิดเจ็ตหรือจัดการตรรกะทางธุรกิจ คุณสร้างอินสแตนซ์ควบคุมสำหรับองค์ประกอบ DOM ผ่านข้อมูลที่ต้องการและคุณสามารถกำหนดเหตุการณ์การเชื่อมโยงวิธีการในการควบคุมของคุณ
เมื่อองค์ประกอบที่เกี่ยวข้องกับการควบคุมถูกลบออกจาก DOM การควบคุมจะทำลายตัวเองและล้างวิธีที่ถูกผูกไว้
ในการสร้างการควบคุมให้สืบทอดโดยการส่งผ่านในวัตถุที่คุณกำหนดไว้ซึ่งมีฟังก์ชั่นเป็น can.control () เหตุการณ์ต่อไปก็ถูกรายงานเช่นกัน
แต่ละอินสแตนซ์ควบคุมมีค่าและข้อกำหนดวิธีการที่สำคัญหลายประการ:
การอ้างอิงถึงอินสแตนซ์ควบคุมนี้
องค์ประกอบ DOM ที่คุณสร้างในอินสแตนซ์ขององค์ประกอบนี้
สิ่งนี้วัตถุพารามิเตอร์ที่จำเป็นในการสร้างอินสแตนซ์
init () ถูกเรียกเมื่ออินสแตนซ์ถูกสร้างสำเร็จ
จัดการที่ติดต่อ
เพิ่มตัวอย่างโค้ดต่อไปนี้ลงในไฟล์ contacts.js เพื่อสร้างตัวควบคุมสำหรับการจัดการผู้ติดต่อ:
การคัดลอกรหัสมีดังนี้:
ผู้ติดต่อ = can.control ({
init: function () {
this.element.html (can.view ('views/contactslist.ejs', {
ผู้ติดต่อ: this.options.contacts
หมวดหมู่: this.options.categories
-
-
-
เมื่ออินสแตนซ์ของผู้ติดต่อถูกสร้างขึ้น init () ทำสองสิ่ง:
ใช้ can.view () เพื่อแสดงผลติดต่อ can.view () ได้รับสองพารามิเตอร์: ไฟล์ที่มีเทมเพลตและข้อมูลหรือแท็กแถบ; มันส่งคืน DocumentFragment (คอนเทนเนอร์ที่มีน้ำหนักเบาที่จัดการองค์ประกอบ DOM)
ใช้ jQuery.html () เพื่อแทรก documentfragment ของ can.view () ลงในองค์ประกอบของการควบคุม
ใช้โมเดลเพื่อแสดงข้อมูล
โมเดลเป็นเลเยอร์นามธรรมของข้อมูลแอพ แอพนี้ใช้สองรุ่น: หนึ่งที่สอดคล้องกับบุคคลที่ติดต่อและอื่น ๆ ที่สอดคล้องกับหมวดหมู่ เพิ่มรหัสต่อไปนี้ไปยังผู้ติดต่อ js:
การคัดลอกรหัสมีดังนี้:
contact = can.model ({
findall: 'รับ /ผู้ติดต่อ',
สร้าง: "โพสต์ /ผู้ติดต่อ",
อัปเดต: "put /contacts /{id}"
ทำลาย: "ลบ /ติดต่อ /{id}"
-
category = can.model ({
findall: 'รับ /หมวดหมู่'
-
โมเดลมี 5 วิธีที่อาจกำหนดข้อมูล CRUD ได้แก่ Findall, Findone, สร้างสร้างอัปเดตและทำลาย คุณสามารถเขียนวิธีการเหล่านี้ใหม่ แต่วิธีที่ดีที่สุดคือการใช้บริการ REST (การถ่ายโอนสถานะเป็นตัวแทน) เช่นเดียวกับรหัสด้านบนคุณสามารถกังวลเกี่ยวกับการเพิกเฉยต่อวิธีการคงที่ที่จะไม่ใช้ในแอพ
มันเป็นสิ่งสำคัญที่จะชี้ให้เห็นที่นี่ว่าอินสแตนซ์ของแบบจำลองนั้นเป็น 'สังเกตได้' จาก CANJs can.observe จัดทำรูปแบบผู้สังเกตการณ์ของวัตถุ can.observe.list ให้รูปแบบการสังเกตของอาร์เรย์ ซึ่งหมายความว่าคุณสามารถรับและตั้งค่าข้อมูลผ่าน ATTR () ในขณะที่ฟังการเปลี่ยนแปลงข้อมูล
เมธอด findall () ส่งคืน model.list ซึ่งเป็นเหตุการณ์ที่เรียกโดย can.observe.list เมื่อองค์ประกอบถูกเพิ่มหรือลบ
ใช้การติดตั้งเพื่อเลียนแบบส่วนที่เหลือ
การสกัดกั้นการร้องขอ AJAX และจำลองการตอบสนองผ่านไฟล์หรือวิธีการ สิ่งนี้มีประโยชน์มากสำหรับการทดสอบหรือเมื่อแบ็กเอนด์ยังไม่พร้อม การติดตั้งคือสิ่งที่แอปจำลองจำลองส่วนที่เหลือ
ก่อนอื่นคุณต้องเตรียมข้อมูลบางอย่างเพื่อติดตั้งและเพิ่มรหัสต่อไปนี้เป็น:
การคัดลอกรหัสมีดังนี้:
var contacts = [
-
id: 1,
ชื่อ: 'William',
ที่อยู่: '1 canjs way',
อีเมล: '[email protected]'
โทรศัพท์: '0123456789'
หมวดหมู่: 'เพื่อนร่วมงาน'
-
-
ID: 2,
ชื่อ: 'ลอร่า',
ที่อยู่: '1 canjs way',
อีเมล: '[email protected]'
โทรศัพท์: '0123456789'
หมวดหมู่: 'เพื่อน'
-
-
id: 3,
ชื่อ: 'Lee',
ที่อยู่: '1 canjs way',
อีเมล: '[email protected]'
โทรศัพท์: '0123456789'
หมวดหมู่: 'ครอบครัว'
-
-
หมวดหมู่ var = [
-
id: 1,
ชื่อ: 'ครอบครัว',
ข้อมูล: 'ครอบครัว'
-
-
ID: 2,
ชื่อ: 'เพื่อน',
ข้อมูล: 'เพื่อน'
-
-
id: 3,
ชื่อ: 'เพื่อนร่วมงาน',
ข้อมูล: 'เพื่อนร่วมงาน'
-
-
ด้วยข้อมูลเชื่อมต่อกับการติดตั้งเพื่อจำลองส่วนที่เหลือ can.fixture () ได้รับสองพารามิเตอร์ URL ที่เราต้องการสกัดกั้นและไฟล์และวิธีการที่เราตอบสนอง โดยปกติแล้ว URL ที่คุณต้องการสกัดกั้นนั้นเป็นแบบไดนามิกและทำตามรูปแบบ เพียงเพิ่มไวด์การ์ดที่ล้อมรอบด้วย {} ใน URL
เพิ่มรหัสต่อไปนี้ไปยังผู้ติดต่อ js:
การคัดลอกรหัสมีดังนี้:
can.fixture ('get /contacts', function () {
ส่งคืน [ผู้ติดต่อ];
-
var id = 4;
can.fixture ("โพสต์ /ติดต่อ", function () {
return {id: (id ++)}
-
can.fixture ("put /contacts /{id}", function () {
กลับ {};
-
can.fixture ("ลบ /ติดต่อ /{id}", function () {
กลับ {};
-
can.fixture ('รับ /หมวดหมู่', function () {
กลับ [หมวดหมู่];
-
การแข่งขันสี่ครั้งแรกจำลองการรับโพสต์วางและลบการตอบสนองของแบบจำลองการติดต่อและห้าจำลองการตอบสนองของแบบจำลองหมวดหมู่
เริ่มแอป
แอพของคุณมีรูปแบบที่จัดการข้อมูลแสดงความคิดเห็นของผู้ติดต่อและจัดระเบียบสิ่งเหล่านี้ทั้งหมดเข้าสู่การควบคุม สิ่งที่คุณต้องทำตอนนี้คือการเริ่มแอป ตอนนี้คุณต้องเริ่มต้นแอปพลิเคชัน!
เพิ่มรหัสต่อไปนี้ไปยังผู้ติดต่อ js:
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร) .ready (function () {
$. เมื่อ (category.findall (), contact.findall ()) แล้ว (
ฟังก์ชั่น (categoryResponse, contactresponse) {
หมวดหมู่ var = categoryResponse [0]
ผู้ติดต่อ = contactresponse [0];
ผู้ติดต่อใหม่ ('#ติดต่อ', {
ผู้ติดต่อ: ผู้ติดต่อ
หมวดหมู่: หมวดหมู่:
-
-
-
มาวิเคราะห์รหัสนี้:
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร) .ready (function () {
ใช้เมธอด jQuery.Read เพื่อรับฟังความพร้อมของ DOM
การคัดลอกรหัสมีดังนี้:
$. เมื่อ (category.findall (), contact.findall ()) แล้ว (
ฟังก์ชั่น (categoryResponse, contactresponse) {
โทรหาวิธีการค้นหา () ของสองรุ่นเพื่อรับประเภทของผู้ติดต่อทั้งหมด เนื่องจาก FindAll () มีความล่าช้า $. เมื่อ () ตรวจสอบให้แน่ใจว่าวิธีการโทรกลับจะดำเนินการหลังจากคำขอทั้งสองเสร็จสิ้นในเวลาเดียวกัน
การคัดลอกรหัสมีดังนี้:
หมวดหมู่ var = categoryResponse [0]
ผู้ติดต่อ = contactresponse [0];
รับชุดข้อมูลของอินสแตนซ์รุ่นที่สอดคล้องกันจากวิธีการค้นหาทั้งสอง () เป็นองค์ประกอบแรกของอาร์เรย์ที่ส่งคืนโดยการตอบกลับ
การคัดลอกรหัสมีดังนี้:
ผู้ติดต่อใหม่ ('#ติดต่อ', {
ผู้ติดต่อ: ผู้ติดต่อ
หมวดหมู่: หมวดหมู่:
-
สร้างการควบคุมผู้ติดต่อสำหรับองค์ประกอบ #Contacts ชุดข้อมูลการติดต่อและพิมพ์จะถูกส่งไปยังการควบคุม
เปิดแอปของคุณด้วยเบราว์เซอร์แล้วคุณจะเห็นรายชื่อผู้ติดต่อต่อไปนี้:
สรุป
นี่เป็นบทแรกในซีรี่ส์การสอนและคุณได้เรียนรู้เกี่ยวกับแกนหลักของ CANJS แล้ว:
โมเดลเลเยอร์ที่เป็นนามธรรมของข้อมูลแอพของคุณ
ดูเทมเพลตที่แปลงข้อมูลเป็น html
การควบคุมองค์กรที่เกี่ยวข้องกับทุกสิ่ง