requirejs 计时问题 - 一些引导 js 不起作用

Posted

技术标签:

【中文标题】requirejs 计时问题 - 一些引导 js 不起作用【英文标题】:requirejs timing issue - some bootstrap js doesn't work 【发布时间】:2016-04-12 05:05:02 【问题描述】:

自从开始使用 requireJs 以来,我遇到了一个奇怪的问题。此问题似乎只发生在某些可以展开以查看子菜单项的侧边栏菜单项上。 RequireJS 模块在

之前的最后被调用

身体

tag 和页面本身的其他 JS 工作正常,只是不是这个侧边栏菜单。非常感谢您的帮助,因为我已经为此奋斗了好几天!

布局视图:

<body>
    ...Ouput ommited for brevity
    <ul class="nav nav-list">
        <li>
            <a href="#" class="dropdown-toggle">
                <i class="menu-icon fa fa-desktop"></i>
                <span class="menu-text">  Devices  </span>
                <b class="arrow fa fa-angle-down"></b>
            </a>

            <b class="arrow"></b>

            <ul class="submenu">
                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="menu-icon fa fa-caret-right"></i>
                        CA Spectrum
                        <b class="arrow fa fa-angle-down"></b>
                    </a>

                    <b class="arrow"></b>
                </li>
            </ul>
        </li>
    </ul>
    ...Output ommited for brevity

    @RenderSection("scripts", required: false)

</body>

“下拉切换”类是 bootstrap.js 用来做的事情 下拉行为。

在布局视图底部呈现脚本部分的子视图:

@section scripts 
    <script data-main="/Scripts/dist/app" src="~/Scripts/dist/require.js"></script>
    <script>
            var ajaxUrl = '@Url.Content(url)';
        require(['app'], function () 
            require(['casnodes-downtime']);
        );
    </script>

app.js

requirejs.config(
    baseUrl: "/Scripts/dist/",
    paths: 
        "requireLib": "./require",
        "app": "./app",
        "main": "./main",
        "jquery": "./jquery-2.1.4",
        "jqbsace": "./jqbsace",
        "datatables": "./jquery.dataTables",
        "moment": "./moment",
        "momentTZ": "./moment-timezone",
        "momentDF": "./moment-duration-format",
        "datarangepicker": "./daterangepicker/daterangepicker",
        "highstock": "./highstock",
        "highmaps": "./highmaps",
        "bootstrap": "./bootstrap",
        "aceconcat": "./aceconcat",
        "jstz": "./jstz-1.0.4.min",
        "shared": "./controllers/shared1",
        "usa": "./us-all",
        // Controller modules
        "casnodes-chronicnodes": "./controllers/casnodes/chronicnodes",
        "casnodes-downtime": "./controllers/casnodes/downtime",
        "casnodes-downnodes": "./controllers/casnodes/downnodes",
        "casnodes-nodedowntime": "./controllers/casnodes/nodedowntime"
    ,
    shim: 
        "highstock": ["jquery"],
        "jstz": 
            exports: "jstz"
        ,
        "bootstrap": ["jquery"],
        "aceconcat": ["bootstrap"],
        "momentDF": ["moment"],
        "highmaps": ['jquery'],
        "usa": ['jquery', 'highmaps']
    
);

requirejs(["main"]);

ma​​in.js

define([], function () 

);

casnodes-停机模块

define(["jquery", "moment", "jstz", "momentDF", "momentTZ", "datatables", "highstock", "datarangepicker", "aceconcat"], function ($, moment) 
    $(document).ready(function () 
     ...Output ommited for brevity
    );
);

【问题讨论】:

当侧边栏菜单不起作用时,您是否在控制台中看到任何错误?仅凭这一点,是很难找到问题的。 没有错误,这就是为什么确实如此困难。 您能发布一个可以重现此问题的代码 sn-p 或 JSFiddle 吗? 【参考方案1】:

你应该使用任何一个

      require(['app','casnodes-downtime'], function () 

      );

    require(, function () 
        require('app');
        require('casnodes-downtime');
    );

不要混淆它们。

【讨论】:

以上是关于requirejs 计时问题 - 一些引导 js 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

RequireJS问题公用的具有依赖性2个模块之间的方法和可变

使用倒计时日期保存当前进度 - 进度条引导程序 4

requireJS的初步掌握

JS模块化工具requirejs教程:基本知识

让 requirejs 与 Jasmine 一起工作

转JS模块化工具requirejs教程:基本知识