페이지에서 페이지로 이동하면 오류가 발생합니다 (중복?)

Question

나는 OnsenUI 2 (지금 현재 rc15)의 pushPage() 기능을 사용하려고합니다.

$(".tile_handler").on("click", ".imalink", function() { 
    var link = $(this).data().href; 
    if(link != null){ 
     document.querySelector("#myNavigator").pushPage(link, { animation: "slide-ios" }); 
    } 
}) 

내가 처음으로 페이지를 누르면, 그것은 잘 작동 다음 OnsenUI 외에도, 내가

jQuery를 3를 사용하고 여기에 특정 요소를 클릭하면 페이지를 추진한다에 내 기능입니다. 돌아 오기 위해 iOS 뒤로 버튼을 사용합니다. 그런 다음 다시 클릭하면이 오류가 발생합니다.이 과정을 반복하면서 점점 더 많은 것을 얻습니다.

[index.js : 450] catched (약속 있음) pushPage가 이미 실행 중입니다. 여기

는 스플리터 페이지를로드하도록되어 또 다른 기능입니다 : 내가 분배기를 통해 두 페이지 사이를 전환 할 때이 던지는 시작

$(".splitter_item").click(function() { 
    var address = $(this).data('address'); 
    $('#content')[0].load(address).then(menu.close.bind($('#menu')[0])); 
}) 

(보다 내가 페이지 사이를 전환 할 때마다)

[undefined : 1] 잡히지 않음 (약속 있음) 스플리터 쪽이 잠김.

---

는 내가 무슨 일이 일어나고 가정은 내가 페이지를로드 그것을두고 내가 다시 액세스 할 때,이 페이지를 다시로드한다는 것입니다.

document.addEventListener('init', function(event) { 
    var page = event.target; 

    if (page.id === 'page1') { 
    page.querySelector('#push-button').onclick = function() { 
     document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}}); 
    }; 
    } else if (page.id === 'page2') { 
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 
    } 
}); 

가 이전에로드 된 페이지를 삭제해야하며이를 방지 할 것 popPage() 기능이있다 : 그러나 as this 같은 OnsenUI 예와 같이 동작 될 것 같지 않습니다. 그러나 참조는 그것을 사용하지 않으므로, 나는 잘못된 것을하고 있다고 가정합니다. 그러나 나는 무엇을 모른다.

---

UPDATE는 :

나는 CodePen에서 두 문제를 재현 할 수 있었다. Here은 분배기 오류이고 here은 pushPage()입니다. pushPage()처럼 내 기능에 문제가있는 것 같아요. 클릭 할 때마다 pushPage() 요청이 추가됩니다. 이유는 확실하지 않습니다.

두 오류는 리플 에뮬레이터에서만 발생합니다 (VS2015 경유). 안드로이드 에뮬레이터에서 재현 할 수없는 것 같습니다 (그러나 $(".tile_handler").on("click", ".imalink", function() { 코드는 여러 번 불규칙하게 실행됩니다). 나는 이것을 더 시험하고있다.

Answer 1

두 가지 오류는 실제로 예를 들어 버튼/링크를 두 번 클릭하면 실수로 두 번 누르거나 수행 한 안전 조치입니다.

애니메이션이 실행되는 동안 동작을 시도 할 때 나타납니다. 예제에서 볼 수 있듯이 일반적으로 첫 번째 페이지가 완료된 후 두 번째 페이지를 시작하는 한 페이지를 두 번 이상 밀어 넣어도 아무런 문제가 없습니다.

splitter 및 navigator에 대한 정확한 코드가 포함 된 데모입니다.

오류는 제공 한 코드에서 비롯된 것이 아니며 다른 곳에서 제공되는 오류가 아닙니다.

제가 생각해 낼 수있는 유일한 이유는 어떤 이유로 든 popPage 메서드가 올바르게 완료되지 않은 경우에 언급 한 동작이 표시된다는 것입니다. 어쩌면 문제를 재현 할 수있는 자신의 코드 provide을 제공하면 더 디버깅 할 수 있습니다.

다른 방법으로는 가 아닌을 권장합니다. 조치를 취하기 전에 강제로 상태를 적용하는 것이 좋습니다. 그러나 문제를 해결하는 것이 아니라 마스킹하는 것입니다. 물론 모든 해킹과 마찬가지로 향후 버전에서 중단 될 수 있습니다.

myNavigator._isRunning = false; 

UPDATE :

다음

당신이 코멘트에 준 두 업데이트 펜입니다 https://codepen.io/IliaSky/pen/YWOOkW?editors=1010 https://codepen.io/IliaSky/pen/QEVVGm?editors=1010

은 기본적으로 당신이 할 때마다 해고 init 이벤트에 핸들러를 추가했다가 페이지가 추가됩니다. 그래서 당신의 논리로 당신은 각 페이지마다 점점 더 많은 핸들러를 추가하고 있습니다. 그냥 한 번만 추가하면 괜찮을 것입니다.

if (e.target.id == 'pagename') ... 

하거나

$(document).on("init", '#dashboard_page', function(){ ... } 

Answer 2

기본적으로 당신이 페이지를 누를 때마다, 즉 페이지는 init 이벤트를 발생 :

이 같은 일을 추가합니다. 그러나 온천은 여전히 ​​돔에 초기 페이지를 유지합니다.

네비게이터 예 (같은 논리는 스플리터 일 적용) :

<ons-navigator> 
    <ons-page id="dashboard"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
</ons-navigator> 

당신은 대시 보드 init 이벤트가 있습니다. 그런 다음 타일을 클릭하고 다른 페이지로 이동합니다. 그 다음 request_list는 자신의 init 이벤트를 발생시킵니다. 그러나 초기 페이지는 여전히 dom에 있습니다.

<ons-navigator> 
    <ons-page id="dashboard" style="display: none"> 
    <div class="imalink" data-href="request_list.html"></div> 
    </ons-page> 
    <ons-page id="request_list"> 
    ... 
    </ons-page> 
</ons-navigator> 

다음과 같은 사용자가 있습니다. 그러나 다음을 두 번째 시간이라고합니다.

$(".tile_handler").on("click", ".imalink", function() { 
    ... 
}) 

리스너를 한 번 더 추가합니다. $el.on("click")은 addEventListener이라는 별칭처럼, 점점 더 많은 청취자를 추가하고 있음을 의미합니다.

그래서 탐색 할 때마다 처음 페이지가 dom에서 제거되지 않았기 때문에 계속 추가 할 수 있습니다.

대체 솔루션 :

1. 만 사용 현재 페이지 (e.target)

   $('selector') // instead of this 
   $(e.target).find('selector') // use this 
   

   만 방금 만든 페이지 내에서 요소를 찾는 데 제한하는 것이 방법.

2. 처음부터 처리기를 활성화합니다. jQuery를 사용하기 때문에 실제로는 init 이벤트에 의존하지 않고 간단한 작업을 수행 할 수 있습니다.

   그냥 어떤 초기화 핸들러의 외부에서 수행이 실제로 핸들러가 문서에 자신을 부착하고 핸들러가 대상이 .tile_handler .imalink 경우에만 호출 될 것을 의미합니다

   $(document).on("click", ".tile_handler .imalink", function() { ... }) 
   

   를 - 그래서 어떤 작동 당신이 창조하는 미래의 환상.

   이 방법이 가장 효율적인 방법은 아니지만 가장 단순한 방법 중 하나입니다.