2011-09-21 15 views
5

मैं नया आवेदन लिखने के लिए शुरू कर रहा हूँ और :)अजाक्स + वापस और आगे बटन

मैं ajax अनुरोध करने के लिए सर्वर का उपयोग कर रहा हूँ यह पूर्ण ajax शैली बनाना चाहते हैं। मुख्य जेएस फ़ाइल दबाए गए लिंक से कुछ चर प्राप्त करती है और उस लिंक के अनुसार कुछ php फ़ाइलों को जाता है कुछ डेटा वापस आते हैं और सब कुछ तैयार तैयार HTML टैग में डालता है।

इस तरह से मैं इस ऐप को देखता हूं।

अब मुझे & आगे बटन बनाने के लिए कुछ समाधान मिल गए हैं, आगे के बटन काम करना शुरू करते हैं लेकिन उन समाधानों में उनकी स्क्रिप्ट पूर्वनिर्धारित पृष्ठों पर जाती है और कुछ स्थिर आईडी के अनुसार कुछ डेटा पढ़ती है इसलिए मुझे यह पसंद नहीं है।

मैं क्या चाहते है ...

  1. मैं कुछ कोड है, तो उपयोगकर्ता वापस दबाने है जो पृष्ठ पुनः लोड करने से ब्राउज़र पाएगा, आगे बटन
  2. याद रखें ब्राउज़र स्थिति की जरूरत है ताकि अगर हम राज्य पर हैं ' सी 'और पीठ दबाया गया था, यह जेएस को वैरिएबल' बी 'के साथ कुछ वैरिएबल लाता है, फिर जेएस php पर जाता है और कहता है' बी 'तो php समझ जाएगा कि कौन सी सामग्री तैयार की जाएगी। जेएस को वापस सामग्री देता है, जेएस पेज अपडेट करता है, सब खुश हैं।

क्या कोई समाधान है जो इस तरह से काम करेगा?

उत्तर

3

मैंने इस उद्देश्य के लिए अतीत में jQuery BBQ: Back Button & Query Library का उपयोग किया है।

विशेष रूप से, basic AJAX उदाहरण यह है कि आप क्या कर रहे हैं। examples के बाकी भी बेहतरीन हैं।

+0

उत्तर के लिए धन्यवाद मुझे लगता है कि मैं इसे – David

2

मुझे लगता है कि आपको backbone.js http://documentcloud.github.com/backbone/ पर एक नज़र डालना चाहिए। इसमें राउटर आधारित अनुप्रयोग संरचना है, जहां प्रत्येक मार्ग वास्तव में एक अलग/# 'एड यूआरएल है।

जब आपके पास कोई आइटम सूची है, तो आप इसे रूट/# आइटम सूची में प्रदर्शित कर सकते हैं, और प्रत्येक आइटम विवरण पृष्ठ/# आइटम/आईडी पर हो सकता है। संपूर्ण नेविगेशन आपके लिए संभाला जाता है, आपको केवल कुछ फ़ंक्शंस कॉल करना है या उस कोड को पेस्ट करना है जिसे आप उस यूआरएल पर ले जाने के दौरान भागना चाहते हैं। (उदाहरण के लिए अनुकूलित http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({ 

    routes: { 
    "help":     "help", // #help 
    "item/:id":  "item", // #item/myItemId 
    "itemList": "list" // #itemList 
    }, 

    help: function() { 
    ... show help 
    }, 

    item: function(id) { 
    ... show single item with jQuery, Ajax, jQuery UI etc 
    }, 

    itemList: function(){ 
    ... show item list with jQuery, jQuery UI etc. 
    } 

}); 

www.myapp.com/#help -> मदद कोड

www.myapp.com/#item/32 -> आइटम आईडी 32 के साथ, जिसमें कब्जा कर लिया है आइटम (आईडी) फ़ंक्शन और अजाक्स

www.myapp.com/#itemList -> सभी आइटमों की सूची, जहां आप प्रत्येक आइटम के लिए # आइटम/आईडी के साथ लिंक जेनरेट कर सकते हैं, के माध्यम से डेटा लाने के लिए अनुरोध किया जाता है।

+0

वाह का प्रयास करूंगा, यह अच्छा लग रहा है। मैंने इस रीढ़ की हड्डी की बात सुनी थी, लेकिन किसी भी तरह से रूटिंग को याद किया। अब मैं कल होना चाहता हूं इसलिए मैं इसे काम पर आज़मा सकता हूं :-) –

+0

मुझे कुछ बग मिलीं या शायद मॉड्यूल-व्यू व्यू-मॉडल इवेंट आधारित संचार के लिए दस्तावेज स्पष्ट नहीं था, लेकिन इसके अलावा, सबकुछ मेरे लिए ठीक काम किया;) –

संबंधित मुद्दे