pushState()를 추가하고 내 프로젝트에 popstate 추가

Question

나는 갤러리를 가지고있는 프로젝트를 가지고 있습니다. 갤러리가 작동하는 방식은 사용자가 이미지 목록을 만났고 각 이미지는 주어진 갤러리의 더 많은 이미지로 연결되는 "앨범"입니다. 현재 작업하고 있지만, 사용자가 선택한 갤러리로 이동 한 후 뒤로 버튼을 클릭하면 다시 앨범 목록으로 이동하지 않습니다. 예를 들어, 홈페이지의 경우 앨범 페이지를 클릭하고 갤러리를 엽니 다. 뒤로 버튼을 클릭하면 홈페이지로 돌아갑니다.

그래서이 문제를 해결하기 위해 히스토리 API를 사용하고 pushState와 popstate를 사용할 수 있습니다. 내 문제는 내가 그것을 작동시키지 못했고 주어진 스크립트에서 함수를 어디에 둘지 확실하지 않다는 것이다. 당신은 내가 사이트의 라이브 버전을 사용하고 싶은 경우

것은 내가 여기에 일하고 있어요 : Live Demo 여기

내 현재 스크립트가됩니다 :

(function(code) { 
    code(window.jQuery, window, document); 
}(function($, window, document) { 
    $(function() { 
    initialize(); 
    }); 

    function initialize() { 
    $.getJSON('/assets/js/images.json', function(json) { 
     $.each(json.albums, function(i, item) { 
     var photos = item.photos, 
      name = item.name, 
      id  = item.id; 

     showAlbums(photos, name, id); 
     }); 
    }); 
    } 
    function showAlbums(p, n, i) { 
    var albums = $('.albums'), 
     gallery = $('.gallery'), 
     album  = $('#templates #album .thumb').clone(true), 
     thumbnail = album.find('.thumbnail'), 
     image  = album.find('.image'), 
     caption = album.find('.caption h4'); 

    thumbnail.attr('href', '#').attr('title', n).attr('data-url', i); 
    image.attr('src', p[0].href).attr('alt', n); 
    caption.html(n); 

    albums.append(album); 

    album.on('click', 'a', function(e) { 
     e.preventDefault(); 
     albums.hide(); 
     gallery.empty().show(); 
     document.title = "Schultz | " + n; 
     $.each(p, function(i, item) { 
     var photo = item.href; 
     showGallery(photo, n); 
     }); 
    }); 
    } 
    function showGallery(p, n) { 
    var gallery = $('.gallery'), 
     images = $('#templates #gallery .thumb').clone(), 
     link = images.find('.thumbnail'), 
     image = images.find('.thumbnail img'); 

    link.attr('href', p).attr('title', n).attr('data-gallery', ''); 
    image.attr('src', p).attr('alt', n); 

    gallery.append(images); 
    } 
})); 

어떤 도움 감사합니다, 당신에게

감사합니다

Answer 1

기본적으로 앨범 클릭 처리기를 외부의이라는 초기화 함수로 리팩토링하여 앨범보기를 작성한 다음 앨범이 cli 일 때 해당 함수를 호출합니다 cked, popstate (뒤로/앞으로).

이렇게하려면 갤러리를 만들기 위해 가져 오는 JSON 데이터에 대한 참조 (데이터 자체 또는 검색하는 데 사용한 XHR)를 저장해야합니다. 이 방법으로 인덱스 또는 ID 대신 "showAlbum"함수를 작성할 수 있습니다.이 함수는 데이터에서 선택한 앨범에 액세스하는 데 사용할 수 있습니다.

그래서 이런 식으로 뭔가 : 대신 상태를 밀어 그 함수를 호출에

// As you're doing your initialization, process the JSON array of albums 
// into a hash by ID (this is one of many ways to go about this, a more 
// robust solution would be to use the XHR promise to ensure the JSON is 
// always there when you need it). 
var albumData = {}; 

function initialize() { 
    $.getJSON('/assets/js/images.json', function(json) { 
    $.each(json.albums, function(i, item) { 
     var photos = item.photos, 
      name = item.name, 
      id  = item.id; 

     // Same as you have now, but with this line: 
     albumData[id] = item; 

     showAlbums(photos, name, id); 
    }); 
    }); 
} 


// Then we create a function to show an album by ID, essentially the same as 
// your click handler now, but retrieving the data from the structure we 
// built out of the JSON. 
function showAlbumById (id) { 
    e.preventDefault(); 
    var album = albumData[id] 
    , photos = album.photos 
    , name = album.name; 
    albums.hide(); 
    gallery.empty().show(); 
    document.title = "Schultz | " + n; 
    $.each(photos, function(i, item) { 
    showGallery(item.href, name); 
    }); 
}); 

그런 다음 당신은 당신의 앨범 클릭 핸들러를 대체 할 것입니다. 여기에서 URL의 상태를 나타내는 쿼리 변수를 사용하고 있습니다 (코드에서는 i으로 참조 됨) 명확성을 위해 theAlbumId입니다. "앨범으로 돌아 가기"버튼을 추가하는 경우 비슷한 핸들러를 사용하지만 URL이 이고 검색어 var가 필요하지 않습니다.

album.on('click', 'a', function(e) { 
    e.preventDefault(); 
    history.pushState({}, '', '?id='+theAlbumID); 
    showAlbumById(theAlbumId); 
}); 

사물의 pushState 부분을 처리해야하지만 사물의 popstate 부분은 더 많은 작업이 필요합니다. 하나의 앨범을 보여 주거나 앨범 색인을 보여주는 두 가지 상태 사이에서 앞뒤로 이동할 수 있어야합니다. 이렇게하려면 popstate 이벤트에 대한 처리기를 추가해야합니다.

// define `onpopstate` or add a listener for `popstate` on the window 
window.onpopstate = function (state) { 
    // pseudocode, you'd need to write or find a function to pull query vars 
    var albumId = getQueryParameter('id'); 

    // if an album ID is in the query string, show it 
    if (albumId) { 
    showAlbumById(albumId); 
    } 
    // otherwise show the index (this should probably be another function) 
    else { 
    albums.show(); 
    gallery.empty().hide(); 
    document.title = "Schultz"; 
    } 
}; 

그리고, 마지막으로, 사용자가 페이지를 새로 고치거나 직접 앨범 URL을 방문 처리하기 위해, 당신은 (단지 popstate처럼 앨범을 페이지로드에 앨범 ID에 대한 쿼리 문자열을 확인하고 보여주고 싶은 것 popstate는 일부 브라우저에서 페이지로드를 실행하지만 그렇지 않아야합니다.)