History.js

Question

के साथ बैक बटन पर क्लिक करते समय सामग्री को पुनर्स्थापित करना मैंने स्थानीय परीक्षण एप्लिकेशन पर History.js लागू किया है। सबकुछ काम करता प्रतीत होता है, हालांकि अगर मैं ब्राउज़र में बैक बटन दबाता हूं, तो पिछली सामग्री बहाल नहीं होती है।

क्या मुझे वास्तव में सामग्री को फिर से लोड करना होगा (यानी एक और AJAX कॉल करें) जब उपयोगकर्ता बैक बटन दबाता है? फिर जिथूब कैसे करता है? मुझे लगता है कि कोड पेड़ में बैक बटन पर क्लिक करते समय वे एक और AJAX कॉल नहीं करते हैं।

History.Adapter.bind(window,'statechange',function() 
    { 
     var State = History.getState(); 
     History.log(State.data, State.title, State.url); 
    }); 


    $('a').each(function(index, link) { 

    if ($(link).attr('data-ajax-disabled') != 'true') { 

     $(link).click(function(event) 
     { 

     var clips = $(this).attr('data-ajax-clips') || ''; 

     $.ajax($(this).attr('href'), 
     { 
      data: {_clips:clips}, 
      success: function(data) 
      { 

       var data = $.parseJSON(data); 


       History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/'); 


       $.each(data.clips, function(key, val) 
       { 
        $(key).replaceWith(val); 
       }); 

      } 
     }); 

     return false; 

     }); 
    } 
    }); 

data.clips एक json सरणी जो कुंजी और मान के रूप में वास्तविक html सामग्री के रूप में एचटीएमएल वस्तुओं की पहचान-पत्र होता है:

यहाँ मेरी कोड है। उदाहरण

'#header' => 'शीर्षक div में सामग्री'

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

Answer 1

ठीक है मुझे यह मिला, संकेत के लिए टोबीस कोहेन का भी धन्यवाद।

किसी को इतिहास ऑब्जेक्ट (State.data) में लोड किए गए डेटा को स्टोर करना होगा। सबसे पहले देखें कि statechange कॉलबैक को परिवर्तित कर दिया:

History.Adapter.bind(window, 'statechange', function() 
{ 

    var State = History.getState(); 

    $.each(State.data.clips, function(key, val) 
    { 
     $(key).replaceWith(val); 
    }); 

    History.log(State.data, State.title, State.url); 

}); 

आप देख सकते हैं, प्रत्येक statechange पर मैं State.data.clips पहुँच सकते हैं और html सामग्री बदल सकते हैं।

नोट: इतिहास.pushState() को कॉल करते समय एक राज्य परिवर्तन भी होता है। इसका मतलब है कि मेरे प्रारंभिक प्रश्न में दूसरा कोड स्निपेट इस तथ्य में गलत है कि मैं वहां सामग्री कुशलतापूर्वक करता हूं। इसके लिए कोई ज़रूरत नहीं है। बस History.pushState() को कॉल करें और राज्य-परिवर्तन कॉलबैक के भीतर कोई भी सामग्री मैनिपुलेशन करें।

तो संपूर्णता के लिए, यह है कि कैसे मैं इतिहास वस्तु में क्लिप धक्का:

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');