jquery, bootstrap 3.0, and requirejs. can't us

问题:

I've looked at all the info (ok.. first google page hits) related to this issue but the solutions didn't work.

my config.js looks like below:

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);
    });
}

And I'm loading a module like following

 require( [                                                                                                                                                                                                                                                                     
 'momsplanner/js/custom_bootstrap'                                                                                                                                                                                                                                              

    ], function(custom_bootstrap) {                                                                                                                                                                                                                                             

    $(document).ready(function() {                                                                                                                                                                                                                                              

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

    });                                                                                                                                                                                                                                                                         

   });   

custom_bootstrap looks like:

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
    };

I get error message at the $selector.tab('show') with error message:

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

How do I fix this error?

回答1:

i've followed this way.

In config i've defined bootstrap in shim:

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

then use insert it in deps array in module define and use bootstrap features like JQ plugin:

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

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

回答2:

I also has the problem, and finally I solve it just change my bootstrap version.

First I use bootstrap3.1.1, it define plugins like this.

(function (o_o) {
    typeof define  === 'function' && define.amd ? define(['jquery'], o_o) :
    typeof exports === 'object' ? o_o(require('jquery')) : o_o(this.jQuery)
})(function($) { ... });

Then I change to bootstrap3.2.0, it define plugins like this.

+function ($) { ... }(jQuery)

The first one, when it defines a plugin, it can't mount the plugin to the global $, so when use the plugin, the error occurs: Uncaught TypeError: undefined is not a function.

The second works fine, because jQuery is a global variable.