이것은 여러 개의 pjax 용기를 지원합니까?

묘사

페이지에 필터가 있는데 필터가 바뀌었을 때 실행합니다

var url = generateUrlByFilter...(); //
$.pjax({
            url : url || '/',
            container : '#main-content',
            fragment  : '#main-content',
            timeout: 5000
        });

그러나 같은 페이지에 팝업 창에 전체 댓글을 표시하는 데 사용되는 다른 pjax가 있습니다. pjax 요청을 동시에 사용할 때 백과 forward가 정상적으로 작동하지 않습니다.

$(document).pjax('.mozaic-holder .block', '#pjax-container', {timeout:5000});

토론 #1

는 우리가 같은 페이지의 여러 용기를 지원하는지 확인하지 못했습니다.당신은'정상적으로 일을 할 수 없다'는 것을 더욱 상세하게 설명할 수 있습니까?
관련 #124

토론 #2

예: 다음

<div class="block">
    <a href="page1.html">page1</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
</div>

<div class="another-block">
    <a href="page11.html">page1</a>
    <a href="page22.html">page2</a>
    <a href="page33.html">page3</a>
</div>

<div id="container"></div>
<div id="another-container"></div>

$(function(){
        $('.block a').click(function (evt) {
            evt.preventDefault();
            $.pjax({
                url: $(this).attr('href'),
                container: '#container',
                timeout: 5000,
                push: true
            });
        });

        $('.another-block a').click(function (evt) {
            evt.preventDefault();
            $.pjax({
                url: $(this).attr('href'),
                container: '#another-container',
                timeout: 5000,
                push: true
            });
        });
    })

#container, #another-container,
.block, .another-block
{
    width: 50%;
    float: left;
    height: 40px;
    box-sizing: border-box;
    text-align: center  ;
}

#container {
    border: 1px solid red;
    color: red;
}

#another-container {
    border: 1px solid blue;
    color: blue;
}

내가 후퇴 [4단계]를 눌렀을 때, 나는 오른쪽 블록이 비어 있기를 기다렸다.하지만 효과가 없다.

토론 #셋

나는 이런 행위를 확인했다.해결 방법은 교체입니다.

var container = $(state.container)
    if (container.length) {
      var direction, contents = cacheMapping[state.id]

가지다

var container = $(pjax.state.container)
    if (container.length) {
      var direction, contents = cacheMapping[state.id]

토론 #4

는 그것이 얼마나 정확한지 확실하지 않다.

토론 #5

감사합니다@samdark,저희가 조사할게요.

토론 #6

한 페이지에 여러 개의 pjax 용기를 지원하기 위해서는 페이지 캐시 관리를 변경해야 합니다.
현재 상태 객체와 새 상태 객체가 다른 컨테이너를 가지고 있으면 잘못된 컨텐트가 저장됩니다.
수정해야 할 두 세션이 있습니다.

    if (options.history && (options.push && !options.replace)) {
        // Cache current container element before replacing it
        cachePush(pjax.state.id, context.clone().contents())

        window.history.pushState(null, "", stripPjaxParam(options.requestUrl))
    }

및

    if (pjax.state) {
        // Since state ids always increase, we can deduce the history
        // direction from the previous state.
        direction = pjax.state.id < state.id ? 'forward' : 'back'

        // Cache current container before replacement and inform the
        // cache which direction the history shifted.
        cachePop(direction, pjax.state.id, container.clone().contents())
    }

나는 다음과 같은 작은 변화를 제의한다.

    if (options.history && (options.push && !options.replace)) {
        // Cache current container element before replacing it
        var previousContext = findContainerFor(pjax.state.container)
        cachePush(pjax.state.id, previousContext.clone().contents())

        window.history.pushState(null, "", stripPjaxParam(options.requestUrl))
    }

및

    if (pjax.state) {
        // Since state ids always increase, we can deduce the history
        // direction from the previous state.
        direction = pjax.state.id < state.id ? 'forward' : 'back'

        // Cache current container before replacement and inform the
        // cache which direction the history shifted.
        var previousContainer = $(previousState.container)
        cachePop(direction, pjax.state.id, previousContainer.clone().contents())
    }

토론 #7

@akovalkov재미있음;건의해 주셔서 감사합니다.@agragra는 $을 치면 추가 요청을 추가합니다.pjax가 성공하고 또 왔어요?

토론 #8

@agragra에서 두 번째 pjax 호출에

토론 #9

를 추가해야 한다는 것을 알았습니다. 그렇지 않으면 현재 URL이 두 번 역사 기록으로 넘어갑니다. 두 번'후퇴'브라우저 단추를 눌러야 이전 페이지로 돌아갈 수 있습니다.

$(document).pjax('.pjax-link', '.first-container', {fragment: '.first-container'});
$('.pjax').on('pjax:success', function () {
    $.pjax({
        url: window.location.href,
        container: '.second-container',
        fragment: '.second-container'
    });
});

그러나 이것은 여전히 해결 방법이다.

토론 #10

2년, 그러나 문제는 여전히 존재한다.