无法在“节点”Meteor JS 上执行“insertBefore”答案

【问题标题】：Failled to execute 'insertBefore' on 'Node' MeteorJS无法在“节点”Meteor JS 上执行“insertBefore”
【发布时间】：2016-01-25 11:01:32
【问题描述】：

我正在为我的 Meteor Web 应用程序使用官方语义 ui 包，并且每当我尝试浏览垂直菜单时都会收到此错误。这导致我的 flowrouter 路线表现不稳定而不显示。因此，扼杀了我的移动体验 :(。但在桌面上一切正常。

Error: Failed to execute 'insertBefore' on 'Node': 
The node before which the new node is to be inserted is not a child of this node.

模板：

<template name="_nav">
  <div>
    <div class="ui grid large menu computer only">
      <div class="item">
        <img src="/cook.png" href="/">
      </div>
      <a href="/" class="item {{isActiveRoute name='home'}}">
        Home
      </a>
      <a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
        About Us
      </a>
      <a href="/team" class="item {{isActiveRoute name='team'}}">
        Team
      </a>
      <a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
        Contacts
      </a>
      <div class="ui large right menu">
        {{#if isInRole 'admin'}}
        <a href="/admin" class="item {{isActiveRoute name='admin'}}">
          Admin
        </a>
        {{/if}}
        <a class="ui item">
          {{> loginButtons}}
        </a>
      </div>
    </div>
  <div class="ui grid secondary menu mobile tablet only">
    <div class="ui container">
      <a class="item toggle-menu">
        <i class="big sidebar icon"></i>
      </a>
      <div class="ui sidebar vertical menu">
        <a href="/" class="item {{isActiveRoute name='home'}}">
          Home
        </a>
        <a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
          About Us
        </a>
        <a href="/team" class="item {{isActiveRoute name='team'}}">
          Team
        </a>
        <a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
          Contacts
        </a>
        {{#if isInRole 'admin'}}
          <a href="/admin" class="item {{isActiveRoute name='admin'}}">
          Admin
          </a>
        {{/if}}
      </div>
        <div class="ui secondary right menu">
          <a class="ui item">
            {{> loginButtons}}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

事件：

Template._nav.events({
  'click .toggle-menu': function () {
    $('.ui.sidebar')
      .sidebar('toggle');
  }
});

路由（FlowRouter）：

FlowRouter.route( '/' , {
  action: function() {
    BlazeLayout.render( '_app', {
      nav: '_nav',
      content: 'home',
      footer: '_footer'
    });
  },
  name: 'home'
});

FlowRouter.route( '/AboutUs' , {
  action: function() {
    BlazeLayout.render( '_app', {
      nav: '_nav',
      content: 'aboutus',
      footer: '_footer'
    });
  },
  name: 'aboutus'
});

FlowRouter.route( '/Team' , {
  action: function() {
    BlazeLayout.render( '_app', {
      nav: '_nav',
      content: 'team',
      footer: '_footer'
    });
  },
  name: 'team'
});

FlowRouter.route( '/Contacts' , {
  action: function() {
    BlazeLayout.render( '_app', {
      nav: '_nav',
      content: 'contacts_list',
      footer: '_footer'
    });
  },
  name: 'contacts'
});

FlowRouter.route( '/Admin' , {
  action: function() {
    BlazeLayout.render( '_app', {
      nav: '_nav',
      content: 'admin',
      footer: '_footer'
    });
  },
  name: 'admin'
});

CSS（如果重要的话）：

.ui.menu .active.item {
    background-color: #E0F1FF !important;
    color: Black !important;
}

.ui.dropdown.item {
  padding: 0;
}

.ui.dropdown.item:hover {
  background-color: rgba(0, 0, 0, 0.00) !important;
}

.ui.menu {
  margin: 0;
}

同样，此错误仅在我尝试使用垂直菜单导航时显示。我也在使用 sach:db-admin 包，它是 yogibens:admin 包，但用于 FlowRouter。它使用 twbs:bootstrap 进行样式设置。这可能会导致一些问题，但我不确定。

【问题讨论】：

标签： javascript meteor semantic-ui

【解决方案1】：

尝试在 {{#each}} 或 {{#if}} 字段周围放置一个容器（或等）。在流星的 github 页面上报告的问题存在错误。类似于替换块的东西。

https://github.com/meteor/meteor/issues/2373

【讨论】：