CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

3.1 Pages & dialogs

       k. Ajax, hashes & history
รูปแบบของการนำ jQuery Mobile ใช้งาน(jQuery Mobile's navigation model)

   หน้าเพจใน jQuery Mobile มักจะใช้ div เป็นองค์ประกอบ ร่วมกับ attribute data-role ในการ set page ซึ่งโดยปกติแล้วองค์ประกอบ div ประกอบด้วย header,content และ footer แต่ละส่วนที่มีใช้ร่วมกับ markup,forms และใช้เสริมใน widgets ของ jQuery Mobile

การนำ Hash และ AJAX ย้ายหน้าเพจ
   การเปลี่ยนแปลง hash ที่เกิดขึ้นไม่ได้ขึ้นกับการคลิก ตัวอย่างเช่น เมื่อผู้ใช้คลิกปุ่ม back เป็นการจัดการผ่าน hashchange event ซึ่งเกี่ยวข้องกับการใช้ window object ของ Ben Alman เป็นความพิเศษของ plugin hashchange event (included ใน jquery mobile) เมื่อ hash มีการเปลี่ยนแปลงเกิดขึ้น(รวมถึงเมื่อโหลดหน้าเพจแรกด้วย) hashchange event จะจัดการส่ง location.hash ไปยัง ฟังก์ชัน $.mobile.changePage() ซึ่งในความสัมพันธ์แบบ non-hash-based URL ทำได้โดยการลบ # ออกจาก address นั้นและ ทำการรีเฟรชหน้า
   โดยทั่วไป การ hash ถูกสร้างขึ้นเมื่อมีการคลิก link ใน jquery mobile เมื่อ link ถูกคลิก jquery mobile จะทำให้แน่ใจว่า link นั้น อ้างอิงถึงที่อยู่ของ URL นั้น และป้องกันพฤติกรรมการคลิกค่าเริ่มต้นของ link จากที่เกิดขึ้นและร้องขอการอ้างอิงถึง URL ผ่าน AJAX แทน เมื่อย้อนกลับหน้าเพจเรียบร้อยแล้ว มันจะ set location.hash ของหน้าเพจใหม่ที่สัมพันธ์กับ URLซึ่งในทางกลับกันการโหลดแต่ละครั้งจะแสดงการอ้างอิงหน้าเพจเมื่อหน้าเพจที่อ้างอิงปัจจุบัน ใน DOM ฟังก์ชันการเปลี่ยนระหว่างการการทำงานหน้าเพจปัจจุบันและหน้าเพจใหม่
   การเปลี่ยนแปลงหน้าเพจเกิดขึ้นผ่านการเพิ่มและลบ class ที่ใช้ css ยกตัวอย่าง การแปลี่ยนโดยการ slide-left จะออกหน้าเพจนั้นแล้วให้ class "slideleft" และ "out" และเข้ามายังหน้าเพจโดยให้ class "slideleft" และ "in" เช่นกันกับที่ class ของ "ui-page-active" เพื่อเป็นการทำ mark ให้เป็นการแสดงให้เห็น active ในหน้าเพจใหม่ เมื่อการ animation เสร็จเรียบร้อย class จะลบ "in" และ "out" ออกและออกจากหน้านั้น ด้วย class "ui-page-active"

pushState plugin
   มีฟีเจอร์ที่เป็นทางเลือกที่จะแปลงต่อไปนี้ เป็นพื้นฐาน hash ของหลายๆ URL ของส่วนที่กว่าวถึงข้างต้นส่วนที่อยู่ใน path เต็มของเนื้อหาซึ่งจะเป็นการล้างค่าและ ทำให้ AJAX ทำงานตามโครงสร้างใน URL ที่ไม่ซับซ้อน สิ่งนี้ถูกสร้างขึ้นเพื่อเพิ่มประสิทธิภาพด้านบนของระบบ URL hash พื้นฐาน สำหรับการลิงค์ของ AJAX แม้ว่าจะมีชื่อ ในทางเทคฟีเจอร์นี้จะแปลง hash พื้นฐาน ของ URL โดยใช้ history.replaceState ไม่ใช่ history.pushState ในรุ่นปัจจุบัน เพราะมีความน่าเชื่อถือมากขึ้นที่เข้ากันกับเป้าหมายของแฟรตฟอร์มเรา สำหรับบราวน์เซอร์ที่ไม่รองรับ history.replaceState หรือ ถ้าฟีเจอร์นี้ไม่ทำงานก็จะใช้ hash พื้นฐานของ URL แทนตั้งแต่ปลั๊กอิน initiazes เมื่อ DOM โหลดเต็มแล้ว ผู้ใช้สามารถเปิดใช้งานและปิดการใช้งาน ด้วยการ set $.mobile.pushStateEnabled กำหนดตัวเลือกทั้งหมดที่เป็น false ทุกครั้งก่อนที่เนื้อหาจะพร้อมดำเนิดการ 


ส่วนสำคัญ: rel="external" and $.mobile.AJAXEnabled=false
   การใช้งานที่แตกต่างกันเล็กน้อยของ replaceState API   ในเบราว์เซอร์ต่างๆสามารถก่อให้เกิดพฤติกรรมแปลกในสถานการณ์ที่เฉพาะตัวอย่างเช่น บางบาวน์เซอร์มีการใช้งานการเรียก destop บราวน์เซอร์มาใช้ใน popstate event ที่แตกต่างกันเมื่อการ link ออกไปภายนอกและ link กลับเข้ามายังบนหน้าเพจซึ่งพื้นที่จะถูกดึงออกหรือเกิดการแทนที่แล้ว เมื่อมีการสร้าง applicationของjquery mobile การนำทางของ AJAX ก็จะถูกปิดการใช้งานไปโดยสิ้นเชิง ทั้งการใช้งานผ่าน rel="external" ของ linkหรือการปิดการนำทางของ AJAX ผ่านเมธอด $.mobile.AJAXEnabled=false จึงแนะนำให้ปิดการใช้งานฟีเจอร์ pushState ที่จะกลับไปที่ hash based ที่จะนำไปสู่พฤติกรรมที่สอดคล้องกันมากขึ้น

การเปลี่ยนหน้าเพจ(changePage)
   ภายใน framework นั้นการเปลี่ยนหน้าเพจแบบทั้งสองเพจสำหรับหน้าเพจใน DOM และสำหรับความตรงการของการโหลดผ่าน AJAX ที่ใช้ฟังก์ชั่น $.mobile.changePage() โดยฟังก์ชั่น $.mobile.changePage() มีอยู่ทั้งหมดของ logic สำหรับการค้นหาหน้าเพจที่มีการเปลี่ยนแปลง,การเปลี่ยนที่ฟอร์มและการจัดการกับการตอบสนองกับสภาวะต่างๆเช่น หาหน้าเพจไม่พบ $.mobile.changePage() สามารถที่จะเรียกใช้งานภายนอกและรับค่าตัวแปลได้ดังต่อไปนี้: to, transition, back, changeHash
   ตัวแปล to สามารถรับค่าตัวแปล string ตัวอย่างเช่นไฟล์ URL หรือ local ที่เป็นองค์ประกอบของ id ซึ่งใน array แรกคือหน้าเพจใดๆเป็นพื้นที่ที่คุณจะเปลี่ยนฟอร์มและ array ที่สองคือ to หน้าเพจหรือเป็นอ๊อฟเจคที่มีคุณสมบัติเป็นประเภทของ URL ที่เป็นแบบ "get" หรือ แบบ "post" และข้อมูล parameter ตามลำดับหลังจากนั้นเป็นการใช้ประโยชน์ของการโหลดหน้าเพจถือว่าเป็นข้อมูลของ form นั้น การเปลี่ยน argument ให้ยอมรับ ตัวแปล string แทน การเปลี่ยนโดยชื่อ ตัวอย่างเช่น "slide" การย้อนกลับ argument ยอมรับตัวแปล boolean แทนการเปลี่ยนที่ควรจะให้ไปข้างหน้าหรือในทางตรงกันข้าม สุดท้ายนี้การ changeHash argument ยอมรับตัวแปล boolean สำหรับความต้องการที่จะ update URL ในขณะมีการเปลี่ยนหน้าเพจเรียบร้อยแล้วฟังก์ชัน $.mobile.changePage() เป็นการใช้ตัวเลขใส่ใน jQuery Mobile
   ตัวอย่างเช่น เมื่อคลิก link ซึ่งทำให้ attribute ของ href เป็นการ link แบบธรรมดาและจากนั้น ฟังก์ชัน $.mobile.changePage() จะจัดการส่วนที่เหลือ ในขณะที่มีการ submit form jQuery Mobile จะเก็บเพียง attribute ของ form,เรียงข้อมูล attribute และใช้ $.mobile.changePage() จัดการการส่งและตอบกลับอีกครั้งเช่นกันกับ การสร้าง link dialog โดยใช้ $.mobile.changePage() ที่จะเปิดการเชื่อมถึงหน้าเพจ โดยไม่ update hash ซึ่งจะเป็นประโยชน์สำหรับการติดตามเก็บประวัติของ dialogs out

องค์ประกอบพื้นฐาน(Base element)
   เป็นอีกองค์ประกอบที่สำคัญของหน้าเพจ jQuery Mobile ที่จะนำไปสู่แบบที่เป็นองค์ประกอบพื้นฐานซึ่งเป็นส่วนที่อยู่ในheadและแก้ไขบนทุกๆเพจเปลี่ยนให้ตรงกับคุณสมบัตินั้นๆ(images,css,js และอื่นๆ)ที่จะอ้างอิงบนหน้าเพจนั้นเพื่อจะได้ร้องขอจาก path ที่เหมาะสมเพื่อจะได้ร้องขอจาก path ที่เหมาะสมในบราวน์เซอร์นั้นไม่ได้รองรับการ update แบบ dynamic ที่องค์ประกอบพื้นฐานตัวอย่างเช่น Firefox 3.6 ลูปทั้งหมดอ้างอิงคุณสมบัติบนหน้าเพจและ attribute ทั้งหมดที่เริ่มต้นด้วย href และ src ที่เป็น path พื้นฐานของ jQuery Mobile

ผู้พัฒนาอธิบายถึงการจัดการ URL พื้นฐาน(Developer explanation of base URL management)
   jQuery Mobile ได้จัดการการร้องขอ http การใช้ร่วมกันของการสร้าง path URL ที่สมบรูณ์และจัดการการสร้าง <base> ที่เป็นองค์ประกอบของ attribute href การรวมกันของสองวิธีนี้ช่วยให้เราสามารถสร้าง URL ที่มีข้อมูลแบบ full path สำหรับการโหลดเพจและองค์ประกอบพื้นฐานที่ถูกจะชี้ไปคุณสมบัติที่เกิดขึ้นจากการร้องขอโดยการโหลดหน้าเพจตัวอย่างเช่น images and stylesheets 

สิ่งที่ต้องทำ:การแก้ไขลักษณะของอ๊อฟเจคการ internal base และ ประวัติของ url

การเก็บข้อมูล URL(data-url storage)
   การนำรูปแบบการเก็บรักษา ข้อมูล attribute url ในองค์ประกอบทั้งหมดของ data-role="page" attribute data-url นี้เป็นการใช้ติดตามที่มาขององค์ประกอบหน้าเพจ หลายๆหน้าเพจมีการฝังค่าไว้ในเนื้อหาapplicationหลักทั้งหมดมี attribute data-url กำหนด parameter ที่ id ของแต่ละองค์ประกอบด้วย data-role="page" จะต้องมีเพียง id เดียวหรือหนึ่งเนื้อหาหรือ base URL โดยจะไม่มี ส่วนของ hash ในหน้าเพจต่างๆนั้นอยู่เนื้อหา application ได้ดึงในรูปแบบ dynamically ผ่าน AJAX และแต่ละ data-url จะถูกกำหนด site ให้สัมพันธ์กับ path เชื่อมโยงภายนอกหน้าเพจ ถ้าการทำงานในสภาวะที่มีการโหลดหน้าเพจภายนอกจากการยอมรับความต่างของ domain data-url จะถูกกำหนดให้เป็น URL ที่สมบูรณ์

การสร้างหน้าเพจเองและ hash ย่อยของ URL(Auto-generated pages and sub-hash URLs)
   บาง plugin อาจเลือกที่จะหยุดการเรียกใช้งานแบบ dynamic เนื้อหาของหน้าเพจนำมาแยกลงในหน้าเพจ ซึ่งสามารถเข้าถึงโดยผ่านการเจาะจงเข้าไปที่ link หนึ่งในตัวอย่างของการนี้จะเป็นปลั๊กอิน Listview ซึ่งจะหยุดการซ้อนกันของ UL หรือ OL แยกลงในหน้าเพจ ซึ่งแต่ละattribute data-url
   ดังนั้นเราสามารถทำการ link ไปหน้าเพจที่เราต้องการได้ปกติใน jQuery Mobile ได้ อย่างไรก็ตามในรายการที่จะ link ไปยังหน้าเพจนั้น หน้าเพจนั้นก่อนอื่นจะต้องได้รับการร้องขอมาจาก server การทำงานนี้หน้าเพจนั้นจะสร้างขึ้นเองโดย plugin ใช้การยอมรับโครงสร้างพิเศษของ data-url <div data-url="page.html&subpageidentifier">
ดังนั้น ยกตัวอย่าง หน้าเพจที่สร้างขึ้นโดย listview อาจมีattribute plugin data-url ที่เหมือนกับส่วนนี้
data-url="artists.html&ui-page=listview-1"
   เมื่อหน้าเพจมีการร้องขอ jQuery Mobile จะรู้ว่าจะแบ่ง URL ที่ "&ui-page" และ สร้าง HTTP ขึ้นมาเพื่อเรียกส่วนของ URL ก่อนเรียก key นั้นในกรณีของ listview มีตัวอย่างดังกล่าวมาข้างต้น URL ควรจะมีลักษณะดังนี้ http://example.com/artists.html&ui-page=listview-1 ... และjQuery Mobile จะร้องขอจากไฟล์ artists.html ซึ่งนั้นจะเป็นการสร้างขึ้นมาของหน้าเพจย่อย ที่สร้างจาก div ร่วมกับ data-url="artists.html&ui-page=listview-1" ซึ่งมันจะแสดงขึ้นมาเป็นหน้าเพจที่ใช้งาน 

หมายเหตุ:  data-urlนั้นเป็น attribute ของส่วนประกอบพื้นที่ URL แบบ full path ไม่ได้เป็นส่วนหลังของ "&ui-page=" จะช่วยให้ jQueryMobile ใช้วิธีการที่เหมาะสมเข้ากับหน้าเพจของ URL ที่เป็น attribute data-url

   กรณีที่ไม่นำ AJAX มาใช้(Cases when AJAX navigation will not be used) ภายใต้บางเงือนไข โดยปกติจะเรียกใช้ http แทนการเรียก AJAX กรณีที่การเรียกนี้ถูกต้องคือเมื่อการ link ไปที่หน้าเพจภายนอกเว็บไซต์ คุณสามารถระบุการร้องขอ http ได้ปกติจะทำผ่าน attribute ของ link ตัวอย่าง 

rel=external
target(ด้วยตัวแปลหลายๆตัว ตัวอย่างเช่น "_blank")

Using the Application Cache
   วิธีแก้ปัญหาที่แนะนำสำหรับผู้ใช้ใช้ประโยชน์จากแคชคือการใช้ jQuery AJAX pre-filter
ตัวอย่าง


$.AJAXPrefilter( function(options, originalOptions, jqXHR) {
    if ( applicationCache &&
   	  applicationCache.status != applicationCache.UNCACHED &&
   	  applicationCache.status != applicationCache.OBSOLETE ) {
   	  // the important bit
   	  options.isLocal = true;
    }
});

ข้อจำกัดที่ควรรู้(Known limitations)

 

© CSMJU