लिफ्ट: AJAX डेटा लोड करने का एक सरल उदाहरण

लिफ्ट वेब स्कैला भाषा ढांचा है जो वेब एप्लिकेशन बनाने और कुछ समस्याओं के समाधान के लिए गैर-मानक दृष्टिकोण की पेशकश करता है। इस नोट में, हम AJAX अनुरोधों का उपयोग करके सर्वर से डेटा लोड करने के सबसे सरल उदाहरण (पहले) पर विचार करेंगे। पोस्ट इस उम्मीद में लिखा गया था कि यह किसी के लिए उपयोगी हो सकता है और एक या दो घंटे में समाधान खोजने में लगने वाले समय को कम कर सकता है, और एक उत्कृष्ट आधुनिक की क्षमताओं के प्रदर्शन के रूप में, लेकिन बहुत लोकप्रिय रूपरेखा नहीं। लेकिन मुझे लगता है कि पाठक के पास पहले से ही लिफ्ट के बारे में कुछ बुनियादी विचार हैं और कुछ अवधारणाओं का उपयोग करता है।


एक उदाहरण के रूप में, आइए एक एप्लिकेशन लेते हैं जो "टिप्पणियों" को प्रदर्शित करना चाहिए - जब पृष्ठ को पहले पांच लोड करना हो, और बाकी को लोड करना हो - मांग पर, पांच टुकड़ों के "भागों" में, पृष्ठ को फिर से लोड किए बिना।

तो चलिए शुरू करते हैं। चलो एक पोस्ट मॉडल एक टिप्पणी का प्रतिनिधित्व करते हैं:

class Post extends LongKeyedMapper[Post] with IdPK { def getSingleton = Post object title extends MappedText(this) object text extends MappedText(this) object date extends MappedDate(this) } 

और संगत साथी वस्तु:

 object Post extends Post with LongKeyedMetaMapper[Post] { def getPosts(startAt: Int, count: Int) = { Post.findAll(OrderBy(Post.date, Descending), StartAt(startAt), MaxRows(count)) } def getPostsCount = Post.count } 

जिसमें दो कार्य पहले ही घोषित किए जा चुके हैं - कुल वस्तुओं की संख्या प्राप्त करना और कुछ कस्टम टिप्पणियाँ प्राप्त करना। हमारे मामले में, इन विधियों के बिना करना और "जगह में" प्रश्नों का निर्माण करना संभव था - सीधे स्निपेट कोड में, लेकिन, मेरी विनम्र राय में, यह परीक्षण को जटिल करेगा और कोड को अधिभारित करेगा।

अब हमें टिप्पणियों का प्रारंभिक प्रदर्शन करने की आवश्यकता है। ऐसा करने के लिए, निम्नलिखित स्निपेट बनाएं:

 class PostRender { def renderPosts(in: NodeSeq): NodeSeq = { Post.getPosts(0, 5).flatMap(item => bind("post", in, "title" -> Text(item.title), "text" -> Text(item.text) )) } } 

और संबंधित एंबेडेड टेम्प्लेट , जो /templates/__post.html में स्थित है (हां, Salaala / Lifft में भी अंडरस्कोर कभी-कभी आवश्यक होते हैं):

 <lift:PostRender.renderPosts> <p> Title: <post:title /> <br /> <post:text /> </p> </lift:PostRender.renderPosts> 

और जो वांछित पेज से जुड़ता है:

 <div id="posts"> <lift:embed what="/templates/__post" /> </div> 

मैं यह नोट करना चाहता हूं कि इस मामले में मैं विशेष के आधार पर "आउटडेटेड" टेम्पलेट मार्कअप का उपयोग करता हूं। xml- टैग, जो इस मामले में मुझे अधिक सुविधाजनक और दृश्य लगता है।

परिणामस्वरूप, मॉडल को डेटाबेस स्कीमा में जोड़ने के बाद, रिकॉर्ड आदि भरने के बाद, हमें कुछ इस तरह मिलता है:

केवल 5 ऑब्जेक्ट, आवश्यकतानुसार। अब हमें शेष टिप्पणियों के लोडिंग को व्यवस्थित करने की आवश्यकता है।

AJAX डाउनलोड

इससे पहले कि हम जारी रखें, यह JsCmd के बारे में कुछ शब्द कहने के लायक है - वास्तव में, लिफ्ट में सबसिस्टम, जो क्लाइंट साइड जावास्क्रिप्ट को सर्वर साइड पर, स्निपेट कोड में और फिर प्रतिक्रिया में पेस्ट करने के लिए डिज़ाइन किया गया है। जेएस कोड को इंजेक्ट करने के विभिन्न तरीके हैं- जेएसआरओवी विधि से, जो आपको जेएस फ्रेमवर्क के लिए प्रॉक्सी तरीकों से कच्चे जेएस को एम्बेड करने की अनुमति देता है। सबसे पहले, JsCmd को JS-code के छोटे आकार के भागों को लागू करने के लिए डिज़ाइन किया गया है।

अतिरिक्त वस्तुओं को लोड करने के लिए बटन प्रदर्शित करने के लिए स्निपेट कॉल जोड़कर टिप्पणियों के सम्मिलन को संशोधित करें:

 <div id="posts"> <lift:embed what="/templates/__post" /> </div> <lift:PostRender.renderLoadMoreControl /> 

और स्निपेट वर्ग:

 class PostRender { val loadSize = 5 val lastLoadIndex = Post.getPostsCount - loadSize var loadStartIndex = 0 def renderPosts(in: NodeSeq): NodeSeq = { Post.getPosts(loadStartIndex, loadSize).flatMap(item => bind("post", in, "title" -> Text(item.title), "text" -> Text(item.text) )) } def renderLoadMoreControl: NodeSeq = { def loadPosts: JsCmd = { loadStartIndex += loadSize JqJsCmds.AppendHtml("posts", <lift:embed what="/templates/__post" />) & { if (lastLoadIndex < loadStartIndex) JsCmds.Replace("loadButton", NodeSeq.Empty) } } SHtml.ajaxButton("Load More", loadPosts _, "id" -> "loadButton") } } 

मानों को टिप्पणियों के साथ लोड किए गए "पृष्ठों" का प्रतिनिधित्व करने के लिए कक्षा में पेश किया गया था - पहले 5 प्रविष्टियों को प्रदर्शित करने के लिए रेंडरपोस्ट विधि अपने प्रारंभिक मानों का उपयोग करती है, साथ ही साथ नई रेंडरलॉडमोरकंट्रोल विधि, जो टिप्पणियों के अगले "हिस्से" को लोड करने के लिए एक बटन जोड़ती है और इसे लोड करती है। , जो AJAX प्रतिक्रिया का कार्यान्वयन है। आइए इसे और अधिक विस्तार से विचार करें।

सबसे पहले, हम लोड करने के लिए रिकॉर्ड के सूचकांक के सूचकांक में वृद्धि करते हैं - यह स्पष्ट है। इसके बाद, हम net.liftweb.http.js.jquery.JqJsCmds पैकेज से AppendHtml विधि कहते हैं, जो jQuery लाइब्रेरी फ़ंक्शंस के लिए रैपर प्रदान करता है (जो कि डिफ़ॉल्ट रूप से Lift में बनाया गया है)। AppendHtml दो मापदंडों को लेती है - DOM ट्री ऑब्जेक्ट की आईडी और प्रकार NodeSeq का ऑब्जेक्ट - वास्तव में, जो कोड जोड़ा जाएगा। मुझे लगता है कि अब यह स्पष्ट हो गया है कि टिप्पणी टेम्पलेट को एक अलग फ़ाइल में क्यों स्थानांतरित किया गया था - अब इसे AJAX प्रतिक्रिया के रूप में परिशिष्ट विधि में पारित किया जा सकता है, और इसके अलावा, इस टेम्पलेट को रेंडरपोस्ट विधि का उपयोग करके संसाधित किया जाएगा! JsCmd प्रकार को वापस करने वाले फ़ंक्शंस को & quot ; - हमारे मामले में, जब अंतिम "पृष्ठ" पर पहुंचा जाता है, का उपयोग करके समवर्ती किया जा सकता है, लोडिंग टिप्पणियों के लिए बटन छिपा हुआ है। दरअसल, यह सब, सभी कोड :)

क्लाइंट की ओर, बटन इस कोड की तरह कुछ में बदल जाएगा:

 <button onclick="liftAjax.lift_ajaxHandler("F167386167581RGRLAG=true", null, null, null); return false;" id="loadButton">Load More</button> 

, और प्रतिक्रिया कोड में jQuery कमांड शामिल होगा, कुछ इस तरह से:

 jQuery('#'+"posts").append("\u000a <p>\u000a Title: Post #11 ... "); 

निष्कर्ष में

बेशक, उपरोक्त उदाहरण कुछ हद तक कृत्रिम है, लेकिन यह लिफ़्ट की कुछ विशेषताओं को प्रदर्शित कर सकता है: ग्राहक-साइड जावास्क्रिप्ट बनाने के लिए AJAX अनुरोध, रैपर और प्रॉक्सी तरीके बनाने के लिए अंतर्निहित टूल, एंड-टू-एंड टेम्प्लेट प्रोसेसिंग। इसके अलावा, जाहिर है, कोई भी ग्राहक जेएस कोड बिल्कुल भी नहीं लिखा गया था - यह सब रूपरेखा द्वारा लिया गया है, जिसके आगे हम इस उदाहरण से आगे नहीं गए। हालाँकि, यह एकमात्र दृष्टिकोण नहीं है, और यदि आवश्यक हो, तो निश्चित रूप से "मैनुअल नियंत्रण" के लिए कोई बाधा नहीं है। आवेदन कोड यहां प्राप्त किया जा सकता है (मावेन द्वारा उपयोग किया जाता है)।