jquery,bootstrap 3.0和requirejs。不能使用bootstrap的功能

时间:2013-10-24 09:15:03

标签: jquery twitter-bootstrap requirejs

我查看了与此问题相关的所有信息(确定..第一次google网页点击),但解决方案无效。

我的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' 

如何解决此错误?

2 个答案:

答案 0 :(得分:0)

我按照这种方式行事。

在配置中我已经在垫片中定义了bootstrap:

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

然后使用在模块定义中的deps数组中插入它并使用JQ插件等引导功能:

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

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

答案 1 :(得分:0)

我也有问题,最后我解决它只是改变我的bootstrap版本。

首先我使用bootstrap3.1.1,它定义了这样的插件。

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

然后我改为bootstrap3.2.0,它定义了这样的插件。

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

第一个,当它定义一个插件时,它不能将插件挂载到全局$,所以当 使用插件时,会发生错误:Uncaught TypeError:undefined不是函数。

第二种工作正常,因为jQuery是一个全局变量。