как отловить событие изменения состояния ОДИН РАЗ с помощью history.js? - PullRequest
Новая
       42

как отловить событие изменения состояния ОДИН РАЗ с помощью history.js?

5 голосов
/ 13 октября 2011

У меня есть пример кода ниже, где, если вы нажимаете на ссылки, а затем используете «назад» и «вперед», каждое изменение состояния будет вызывать все больше и больше обращений к событию «statechange». Вместо того, что я ожидаю.

Ссылки:

Код: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>History start</title>
</head>
<body>
    <h1>Headline</h1>
    <hr>
    <div id="menu">
        <ul>
            <li>
                <a href="page-1">Page 1</a>
                <div style="display:none;">
                    <h2>Page 1</h2>
                    <p>Content 1</p>
                </div>
            </li>
            <li>
                <a href="page-2">Page 2</a>
                <div style="display:none;">
                    <h2>Page 2</h2>
                    <p>Content 2</p>
                </div>
            </li>
        </ul>
    </div>
    <hr>
    <div id="content">
        <h2>Start page</h2>
        <p>Paragraf</p>
    </div>
    <script src="external/jquery-1.6.2.min.js"></script>
    <script>if ( typeof window.JSON === 'undefined' ) { console.log("Loaded json2"); document.write('<script src="external/json2.js"><\/script>'); }</script>
    <script src="external/history.adapter.jquery.js"></script>
    <script src="external/history.js"></script>
    <script>
    $(document).ready(function() {
        History.enabled = true;

        $('a').each(function() {
            $(this).click(function(e) {
                e.preventDefault();
                var $link = $(e.target),
                    state = {'href': $link.attr('href'), 'title': $link.html()},
                    $div = $link.siblings('div'),
                    content = $div.html();

                $('#content').html(content);

                History.pushState(state, state.title, state.href);

                return false;
            });
        });

        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();
            // remove double hit on event
            console.log(State);

        });

    });
    </script>
</body>
</html>

Ответы [ 2 ]

6 голосов
/ 30 ноября 2011

Это потому, что вы вызываете функцию pushState при загрузке страницы, что также вызывает изменение состояния. Я находился в аналогичной ситуации и использовал только логическое значение перед pushStates, поэтому я знал, что выполняю pushState. Похоже на это ... 

historyBool = true;
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate

var State = History.getState(); // Note: We are using History.getState() instead of event.state

    //don't run our function when we do a pushState
    if(historyBool){
        historyBool = false;
        tempFunction = new Function(State.data.ajaxRunFunction);
        tempFunction();
    }
    historyBool = true;
});

historyBool = false;
historySet = {ajaxRunFunction: "upc('" + pageID + "','')"};
History.pushState(historySet,"","");
4 голосов
/ 15 октября 2013

Хотя это не относится к вашей конкретной проблеме, у меня был сценарий, в котором мне нужно было отсоединить обработчик событий от адаптера истории.Для этого вы можете отсоединить событие «statechange» из окна, к которому привязывается History.Adapter при вызове History.Adapter.bind (): 

$(window).unbind('statechange.namespace');

Вы можете добавить пространство имен к событиючтобы избежать отмены привязки других несвязанных обработчиков событий, как указано выше, или использовать именованную функцию, чтобы специально отсоединить эту функцию.Чтобы использовать указанное выше пространство имен, вам необходимо привязать обработчик, используя то же пространство имен, то есть 

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