jquery、bootstrap 3.0 和 requirejs。无法使用bootstrap的功能

标签 jquery twitter-bootstrap requirejs

我已经查看了与此问题相关的所有信息(好吧..第一次谷歌页面点击),但解决方案不起作用。

我的 config.js 如下所示:

var config = {

    paths   : {
        jquery        : "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
        // "jquery"        : "momsplanner/backgrid/assets/js/jquery",                                                                                                                                                                                                           
        "underscore"    : "momsplanner/underscore/underscore",
        "text"          : "momsplanner/requirejs_text/text",
        // "backbone"      : "momsplanner/backbone",                                                                                                                                                                                                                            
        "Backbone"      : "momsplanner/backgird/assets/js/backbone",
        "Backgrid"      : "momsplanner/backgrid/lib/backgrid",
        "bootstrap"     : "momsplanner/bootstrap/dist/js/bootstrap"
        // "bootstrap"     : "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap"                                                                                                                                                                                   
        // 'jquery.bootstrap'     : "momsplanner/backgrid/assets/js/bootstrap"                                                                                                                                                                                                  
    },

    // A lot of dependencies don't support AMD loaders. Here is an example shim                                                                                                                                                                                                 
    // configuration to remedy that.                                                                                                                                                                                                                                            
    shim : {
        "underscore": {
            exports: '_'
        },
        "Backbone" : {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        "Backgrid" : {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: 'Backgrid'
        },
        'bootstrap' : {
            deps: ["jquery"]

        }
    }
};

if (typeof exports === 'object') {
    // If this file is loaded from node, export the config variable.                                                                                                                                                                                                            
    module.exports = config;
} else if (typeof define === 'function' && define.amd) {
    // If this file is being loaded in the browser, load the config                                                                                                                                                                                                             
    define([], function() {
        requirejs.config(config);
    });
}

我正在加载如下模块

 require( [                                                                                                                                                                                                                                                                     
 'momsplanner/js/custom_bootstrap'                                                                                                                                                                                                                                              

    ], function(custom_bootstrap) {                                                                                                                                                                                                                                             

    $(document).ready(function() {                                                                                                                                                                                                                                              

        custom_bootstrap.setNavbarActive();                                                                                                                                                                                                                                     
        custom_bootstrap.gotoTab();                                                                                                                                                                                                                                             

    });                                                                                                                                                                                                                                                                         

   });   

custom_bootstrap 看起来像:

define([
    "jquery",
    "bootstrap"
], function($) {

.. omitting some functions..

    // http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload                                                                                                                                                                      
    function gotoTab() {

        // Javascript to enable link to tab                                                                                                                                                                                                                                     
        var hash = document.location.hash;
        var prefix = "tab_";
        if (hash) {
            var $selector = $('.nav-tabs a[href='+hash.replace(prefix,"")+']');
            console.log($selector.html());
            $selector.tab('show'); // ERROR HERE!!!! <------------------------
        }

        // Change hash for page-reload                                                                                                                                                                                                                                          
        $('.nav-tabs a').on('shown', function (e) {
            window.location.hash = e.target.hash.replace("#", "#" + prefix);
        });
    }


    return {
        setNavbarActive: setNavbarActive,
        gotoTab: gotoTab
    };

我在 $selector.tab('show') 处收到错误消息,错误消息为:

Uncaught TypeError: Object [object Object] has no method 'tab' 

如何修复此错误?

最佳答案

我就是这样走的。

在配置中,我在垫片中定义了 Bootstrap :

shim:{
    ....
    bootstrap      : ['jquery']
    ....
}

然后将其插入模块定义中的 deps 数组中,并使用 JQ 插件等 Bootstrap 功能:

define(
    [
        "jquery",
        "bootstrap"
    ],

    function($){
       $('.some').affix();
    }
)

关于jquery、bootstrap 3.0 和 requirejs。无法使用bootstrap的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19561755/

相关文章:

jquery next 不适用于下一个 div,无法添加类

html - Bootstrap 3 响应式矩形列

javascript - 使用 RequireJS 在生产中需要大量小文件是否有意义

javascript - 使用没有 View 模型 .JS 文件的 knockout 组件?

javascript - 如何在 DateTimePicker JavaScript 中查找今天的日期?

javascript - 样板 Javascript 脚本/插件?

javascript - knockout 绑定(bind)和 CK 编辑器工具栏未出现

javascript - 如何将 Javascript 用户的用户数据返回到 Django

ruby-on-rails - Bootstrap 3 模式布局问题

javascript - CommonJS、AMD 和 RequireJS 之间的关系?