javascript - Meteor:Template.rendered 回调函数中尚不存在 DOM 元素

Question

我正在使用 Meteor 构建一个应用程序，我有一个菜单按钮，它是一个显示和隐藏侧边栏的切换开关。 (绿色条)

页面加载或用户登录后，如果浏览器宽度大于 768px，我想单击菜单切换按钮来显示它。

目前，我通过被动地检查 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，则不会单击该元素。

所以 2 个问题

1) 客户端登录回调被调用两次

2)我必须使用 setTimeout 等待元素存在，然后再单击它。

如何解决这个问题？

如果您需要我提供更多信息，请告诉我，非常感谢您的帮助。

Answer 1

解决方案(使用 Meteor.defer 和回调函数):

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()

注意，我使用 Meteor.defer，而不是在单击 $('.show-left') 按钮之前使用 setTimeout。 Meteor.defer 等待 DOM 完全更新并拥有所需的所有元素。否则，当尝试访问渲染时的 DOM 元素时，如果没有这个，它们最终可能无法工作!将 Meteor.defer 与回调一起使用，以使用 DOM 上的事件或在渲染的回调或 onAfterAction 函数中更新 DOM。