2014-06-30 4 views
0

Meteor로 앱을 제작 중이며 사이드 바를 표시하거나 숨기는 토글 메뉴 버튼이 있습니다.Meteor : Template.rendered 콜백 함수에 DOM 요소가 아직 존재하지 않습니다.

일단 페이지가로드되거나 사용자가 로그인하면 브라우저 너비가 768px보다 큰 경우 메뉴 토글 버튼을 클릭하여 표시하고 싶습니다.

현재 Meteor.user()는 사용자가 로그인되어 있고 사용자가 처음으로 로그인하는 경우 페이지가로드되면 호출되므로 Meteor.user()를 반응 적으로 검사하여이 작업을 수행합니다.

userEnabled =() -> 
    if Meteor.user() 
    console.log 'user Enabled called ' + menuOpen 
    if $(window).width() > 768 
     if menuOpen is false 
     console.log 'reached inside' 
     # Need to use setTimeout before clicking because .show-left element has just been added back to the screen, so we need to wait. I don't like this very much, need to find better method. 
     setTimeout -> 
      $('.show-left').click() 
     , 600 

Deps.autorun() -> 
    userEnabled() 

문제는 페이지로드시에 어떤 이유로, userEnabled()가 때로는 너무 개방, 두 번 호출하고, 사이드 바 종료된다는 점이다. 또한 또 다른 문제는 setTimeout 메서드를 사용하여 메뉴 토글 요소가 존재할 때까지 기다려야하므로 클릭 할 수 있습니다. setTimeout이 없으면 요소가 클릭되지 않습니다. 클라이언트 측 로그인 콜백

그래서이 문제

1)을 두 번

2)이 요소를 클릭하기 전에 존재 기다릴에서는 setTimeout을 사용할 필요가 호출된다.

이 문제를 어떻게 해결할 수 있습니까?

나에게 더 많은 정보가 필요하면 알려주고 도움을 많이 주셔서 감사합니다. (콜백 기능을 사용 Meteor.defer)

답변

1

솔루션 :

userEnabled =() -> 
    if Meteor.user() 
    if $(window).width() > 768 
     if !$('.show-left').hasClass 'active' 
     # Need to use setTimeout before clicking because .show-left element has just been added back to the screen, so we need to wait. I don't like this very much, need to find better method. 
     Meteor.defer -> 
      $('.show-left').click() 

Router.map -> 
    @route 'template1', 
    path: '/template1', 
    @route 'addAndSearchPosts', 
    path: '/', 
    onAfterAction: -> 
     userEnabled() 

주의 대신에 $을 클릭하기 전에에서는 setTimeout을 사용하여 ('쇼 떠났다.') 단추 나는 Meteor.defer를 사용합니다. Meteor.defer는 DOM이 완전히 업데이트되고 모든 요소가 필요할 때까지 대기합니다. 그렇지 않으면 렌더링시 DOM 요소에 액세스 할 때이 기능이 없으면 작동하지 않을 수 있습니다! Meteor.defer를 콜백과 함께 사용하여 DOM에서 이벤트를 사용하거나 렌더링 된 콜백 또는 onAfterAction 함수에서 DOM을 업데이트하십시오.