jquery，bootstrap 3.0和requirejs。無法使用引導程序的功能

Question

我已經查看了與此問題相關的所有信息（確定..第一次谷歌頁面點擊），但解決方案無法正常工作。

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

我該如何解決這個錯誤？

Answer 1

我按照這種方式。

在CONFIG我在墊片定義自舉：

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

然後使用在模塊DEPS陣列插入它定義和使用自舉功能，如JQ插件：

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

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

Answer 2

我還具有問題，最後我解決它只是改變我的引導版本。

首先我使用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) 

第一個，它定義了一個插件，它可以不安裝插件的全球$，所以當 使用插件，出現錯誤：未捕獲的類型錯誤：未定義是不是一個函數。

第二個工作正常，因爲jQuery是一個全局變量。