Meteor iScroll 5 초기화

Question

Meteor에서 iScroll (v5)을 사용하는 데 문제가 있습니다. 패키지를 아무 문제없이 설치했지만 문서가로드되었을 때 iScroll을 호출하면 약간의 고통이 있습니다. 내가 노력 있도록

유성은 iScroll 데모처럼 몸의 온로드를 지원하지 않습니다

if (Meteor.isClient) { 
    Meteor.startup(function() { 
    var myScroll; 
myScroll = new IScroll('#wrapper', { mouseWheel: true }); 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
}); 

}

을 내 main.js 파일에서.

이것은 페이지를 새로 고친 후에 만 ​​작동하는 것으로 보이며 새 페이지로 이동할 때 실행되지 않습니다.

또한 내 응용 프로그램의 기본 페이지에서 Template.rendered 함수에 초기화 코드를 추가하려고했습니다. 다시 그것은 때로는 다른 사람들이 아닌 것처럼 보인다. ??

죄송합니다. 멍청한 사람이라면 유감스럽게도 유감스럽게도 템플릿 렌더링이 내 머리를 터지게합니다.

누구든지 제공 할 수있는 도움은 극명하게 평가 될 것입니다!

스티븐

Answer 1

당신은 유성의 반응 렌더링 iScroll에 의해 생성 된 DOM 노드를 파괴하고 파괴하고 다시 얻을 않는 경우 iScroll를 다시 인스턴스화하지 않도록해야합니다. scroller 내부에서 DOM을 변경할 때마다 iScroll.refresh()를 호출하여 치수를 업데이트 할 수 있도록해야합니다. 당신이 div의와 컬렉션을 두 번 포장 할 필요가

<template name="myCollectionView"> 
    <div class="my_collection"> 
    <div class="scroller"> 
     {{#isolate}} 
     {{#each items}} 
      {{> item}} 
     {{/each}} 
     {{/isolate}} 
    </div> 
    </div> 
</template> 

참고 : -

의이 예를 통해 가자 당신이 스크롤하려는 모음과 템플릿을 말한다. iScroll에 전달하기위한 외부 div my_collection과 iScroll의 JS에 의해 실제로 이동되는 단일 내부 div scroller.

items 주위의 #isolate 블럭에주의하십시오 - 이는 Meteor가 해당 블럭 외부에서 재 렌더링을 전파하지 않음을 알려줌으로써 콜렉션이 변경 될 때 외부 DOM (래퍼와 스크롤러 노드)이 대체되지 않도록합니다 . 이제

의이 iScroll을 초기화하고 DOM은 유성의 반응에 의해 변경 될 때 실행을 유지하기 위해 적절한 회계 장부를 추가 할 수 있습니다 :

var scroller; // file-scope instance of iScroll that we will update appropriately 
... 
Template.myCollectionView.rendered = function() { 
    var scrollNode = this.find('.scroller'); 
    // let's figure out if iScroll is already running by checking whether 
    // it's DOM nodes are still intact. 
    if (scrollNode.style.webkitTransform == "") { 
    // either first time rendering, or someone replaced our DOM nodes. 
    // Re-instantiate iScroll. 
    scroller = new iScroll(this.find('.my_collection')); 
    } else { 
    // DOM is still intact, just tell iScroll to update its size 
    // You need to do this in a setTimeout to make sure DOM changes 
    // have already been rendered (this affects size computations) 
    Meteor.setTimeout(function() { scroller.refresh(); }, 0); 
    } 
} 

확인합니다 (예 : .my_collection를) 래퍼 div에 대한 CSS에서 overflow: hidden; 세트를 가지고 있고, 당신이 있는지 잘 가라.