विजेट ट्विटर उड़ान

Question

के लिए इसी तरह के रूप में रीढ़ कठपुतली मॉड्यूल मैं खंड के लिए सही क्लाइंट साइड ढांचे को चुनने में पढ़ रहा हूँ/विजेट में मेरी दृश्यपटल कोड modularize।

मूल रूप से मैं क्या है/चाहते हैं:

• कई pagetypes के साथ एक जटिल वेबसाइट है, इसलिए कोई एकल पृष्ठ आवेदन।
• सभी पृष्ठों जावास्क्रिप्ट के उपयोग के बिना एक पूरा पेज रेंडर करने के लिए सक्षम हैं। IOW: जावास्क्रिप्ट केवल समृद्धि के रूप में उपयोग किया जाता है।
• पृष्ठों की बहुत बहुत गतिशील जिस तरह विगेट्स स्क्रीन पर दिखाया जा सकता है। सर्वर साइड मैं विजेट में ही मेरी कोड (समग्र पैटर्न) modularized दिया है, जहां प्रत्येक विजेट अपने आप के लिए जिम्मेदार है पर जटिलता को दूर करने के:
  • सर्वर साइड नियंत्रक कोड
  • सर्वर साइड templating (होगन का उपयोग कर/मूंछें)
  • मार्ग अंतिमबिंदुओं, यह (ग्राहक
  • संरचनात्मक सीएसएस से कहा जा करने की जरूरत है चाहिए सीएसएस विजेट की संरचना converning के रूप में नज़र & महसूस)
• सर्वर की ओर से रेजियो करने का विरोध किया nManager अंततः तय करता है कि कौन से विजेट प्रस्तुत किए जाते हैं और जहां उन्हें स्क्रीन पर प्रस्तुत किया जाता है। Endresults यह है कि RegionManager पूरे एचटीएमएल (सर्वर से उत्पन्न) को अपने सभी विगेट्स के प्रतिपादन के समग्र के रूप में थूकता है।

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

जो मैं अंततः चाहता हूं वह यह है कि, मैंने सर्वर पर समग्र पैटर्न का उपयोग पहले से ही क्लाइंट को विस्तारित करने के लिए किया है ताकि एक विजेट (स्क्रीन पर 1 विशेष तर्क ब्लॉक) में सभी उल्लिखित सर्वर-साइड कोड, साथ ही सभी आवश्यक क्लाइंट-साइड कोड शामिल हैं।

मुझे उम्मीद है कि यह समझ में आता है।

चाहेंगे कठपुतली इस परिदृश्य में एक ग्राहक के पक्ष ढांचे के रूप में प्रयोग की जाने वाली अनुकूल हो? मैं पूछ रहा हूं क्योंकि मैरियनेट मॉड्यूल की अवधारणा है जो मैं उपरोक्त परिदृश्य में एक विजेट के रूप में वर्णित करता हूं, तो मुझे 100% यकीन नहीं है। (मैं अपने प्रश्न में ट्विटर फ्लाइट का जिक्र कर रहा हूं, क्योंकि मेरा मानना ​​है कि यह एक फिट होगा, लेकिन वर्तमान में यह इतना नया है कि मैं इस समय

पर मूल रूप से सोच रहा हूं कि मैं मूल रूप से क्या पूछ रहा हूं अगर किसी के पास इन लाइनों के साथ कुछ करने का अनुभव है।

Answer 1

मुझे लगता है कि बैकबोन.जेएस का उपयोग केवल इस प्रकार के एप्लिकेशन के लिए सही है जिसका आप वर्णन कर रहे हैं। आप शायद पहले ही इसे पढ़ चुके हैं, लेकिन अधिकांश रीढ़ की हड्डी साहित्य चारों ओर केंद्रित है अपने विचार उसके सर्वर उत्पन्न JSON मॉडल और संग्रह हो रही है, फिर HTML यूआई कि मॉडल/संग्रह का प्रतिनिधित्व करता है समारोह प्रस्तुत करना देखें का उपयोग करते हुए उत्पन्न करने के लिए (ग्राहक पर)।

एच owever यह नहीं है इस तरह से इस्तेमाल किया जा रहा है। असल में आप उन तत्वों को जोड़ने के लिए कुछ भी नहीं रोक रहे हैं जिनमें पहले से मौजूद सामग्री है, जो आपको बैकबोन की मॉड्यूलरिटी, इवेंट सिस्टम आदि के सभी लाभ प्रदान करता है। मैं अक्सर उन विचारों का उपयोग करता हूं जिनमें कोई मॉडल या संग्रह नहीं है, पूरी तरह से क्योंकि मुझे शैली की अनुरूपता पसंद है।मैंने उन तरीकों में नीचे वर्णित एक दृष्टिकोण का भी उपयोग किया है जहां मुझे पुराने, मौजूदा अनुप्रयोगों के साथ काम करना पड़ा है, जिन्हें अभी तक नहीं मिला है, या कभी भी एक अच्छा आरईएसटी एपीआई नहीं होगा, लेकिन वे HTML में सामग्री प्रदान करते हैं।

सबसे पहले, की सुविधा देता है मान निम्न HTML अपने विजेट का प्रतिनिधित्व करता है:

<div id="widget"> 
    <div class="widget-title"></div> 
    <div class="widget-body"> 
     <!-- assume lots more html is in here --> 
     <a href="/Controller/DoWidgetStuff">Do something!</a> 
    </div> 
</div> 

इस मामले में, आप एक ही Widget मॉडल के साथ रीढ़ की हड्डी इस्तेमाल कर सकते हैं। यह एक बहुत ही साधारण मॉडल, इस तरह होगा: तथ्य विजेट अपने निर्माता के लिए एक पैरामीटर के रूप में एक यूआरएल को प्राप्त होने वाले

App.WidgetModel = Backbone.Model.extend({ 
    intialize: function() { 
     this.url = this.options.url; 
    } 
}); 

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

new App.WidgetView({el: $("#widget")})' 

:

App.WidgetView = App.View.ComboboxView = Backbone.View.extend({ 

    initialize: function() { 

     this.model = new App.WidgetModel({}, { url: this.$("a").attr("href") }); 

    } 

    // rest of the view code 

}); 

तो दृश्य instantiating की तरह कुछ होगा

उपरोक्त सभी को करके आप बैकबोन आपको और उसके मॉड्यूलर और अच्छी तरह से encapsulated प्रदान करता है, जो कुछ भी कर सकते हैं, जो आप के बाद कर रहे हैं।

इस पूरे दृष्टिकोण के अंतिम परिणाम है:

1. आप शुद्ध एचटीएमएल जो (मुझे लगता है) जावास्क्रिप्ट के बिना कार्यात्मक है के रूप में विजेट यूआई प्रदान की गई है।
2. आप मौजूदा HTML पर एक दृश्य संलग्न करते हैं।
3. आप jQuery के साथ प्रस्तुत एचटीएमएल से निकाले गए (जैसे यूआरएल) द्वारा विकल्प के रूप में व्यू में पास करते हैं।
4. दृश्य मॉडल की आवश्यकताओं (जैसे यूआरएल) के प्रासंगिक विकल्पों पर गुजरने वाले मॉडल को तत्काल करने के लिए ज़िम्मेदार है।
5. इसका मतलब है कि सभी डायनामिक सर्वर साइड सामग्री प्रस्तुत एचटीएमएल में अंतर्निहित है और आपका व्यू एक मॉड्यूलर जावास्क्रिप्ट घटक है जो इसके लिए सामान कर सकता है, जो मुझे लगता है कि अंत परिणाम है जिसके बाद आप हैं।

तो आपने उल्लेख किया है कि आप अपने विजेट के लिए AJAX कार्यक्षमता चाहते हैं और यह दृष्टिकोण भी ठीक है। इस दृष्टिकोण का उपयोग करके, अब आप नई सामग्री प्राप्त करने के लिए Widget मॉडल पर मानक बैकबोन fetch और save फ़ंक्शंस का उपयोग कर सकते हैं। इस उदाहरण में यह प्रस्तुत एचटीएमएल से प्राप्त यूआरएल से है। जब आपको प्रतिक्रिया मिलती है, तो आप पेज पर HTML को अपडेट करने के लिए दृश्य, रेंडर फ़ंक्शन या अन्य बेहतर अनाज वाले फ़ंक्शंस का उपयोग कर सकते हैं।

कुछ अंक:

केवल एक चीज बाहर देखने के लिए के लिए है कि आप यह है कि अगर क्या सर्वर है fetch और save कार्यों के लिए "text/html" की सामग्री प्रकार को बदलना होगा प्रदान करते हैं। उदाहरण के लिए:

this.model.fetch({ 
    type: "POST", 
    contentType: "text/html" 
}); 

आखिरकार, मैंने जो मॉडल प्रस्तावित किया है, उसे कोई सामग्री के साथ तत्काल नहीं किया गया है।हालांकि अगर आपकी AJAX कॉल सामग्री प्रकार "टेक्स्ट/एचटीएमएल" हैं, तो आपको अपने मॉडल के साथ खेलने की आवश्यकता हो सकती है ताकि यह इस सामग्री को अपने गुण संग्रह में ठीक से स्टोर कर सके। अधिक जानकारी के लिए this answer देखें।