Jquery（metis-menu）不使用铁：流星中的路由器 [英] Jquery (metis-menu) not working with iron:router in meteor

问题描述

我正在尝试实施侧边栏（利用 sb-admin的侧边栏-2 当我使用侧栏作为main.html的一部分时，切换工作完全正常。但是，当我实现相同的铁线：路由器并将侧边栏设置为持久性时，侧边栏失去了切换/隐藏功能。基本上，子级元素总是被扩展，我无法隐藏那些子级元素。有没有解决这个问题？

I'm trying to implement a sidebar (leveraging the sidebar from sb-admin-2When I use the side bar as part of main.html, the toggles work perfectly fine. However, when I implement the same via iron:router and set the sidebar to be persistent, the sidebar loses the toggle/hide functionality. basically, the child level elements are always expanded and I have no means to hide those child level elements. Is there a work around to this?

我是 pastie 中的旁边条形码 - >这在client / main.html中有用

I've the side bar code here in pastie --> This works when in client/main.html

但是当我在这个的模板中尝试相同的时候，传递给铁：路由器通过以下代码，切换功能丢失

But when I try the same from within a template such as this and pass it to iron:router via the below code, the toggle functionality is lost

router.js：

Router.configure({
      layoutTemplate: 'sidebar'
});

我读过这个类似的问题这与渲染的回调有关，但我不知道如何让它在这里工作。

I read in this similar question that this has something to do with rendered callback but I'm not sure how I can get it to work here.

推荐答案

这是我解决它的方法。

AppLayout ：

<template name="Index">
    <div id="wrapper">
        <!-- Navigation -->
        {{> navigationBar}}
        {{> Sidebar}}
        <div id="page-wrapper">
            <div class="row breadcrumbPosition">
                {{> breadcrumb}}
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-xs-9 blockablelockable">
                    {{> yield}}
                </div>
            </div>
          </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
</template>

Sidbar.html 是原始边栏实施的模板。

Sidbar.html is a template with the original sidebar implementation.

SidebarHelper.js 在 onRendered 中包含一个functino，它初始化了metis菜单，如下所示：

SidebarHelper.js contains an functino in onRendered which initializes the metis menu like so:

Template.Sidebar.onRendered( function(){

    $('.metisMenu').metisMenu({
      toggle: true // disable the auto collapse. Default: true.
    });
});

这篇关于Jquery（metis-menu）不使用铁：流星中的路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！