Zurb基金會3 + RequireJS：插件加載問題

Question

我想用RequireJS加載Zurb Foundation 3。這裏是我的配置部分：

require.config({ 
    paths: 
    { 
     'jquery': 'libs/jquery/jquery', 
     'foundation': 'libs/foundation/foundation.min', 
     'foundation-init': 'libs/foundation/app' 
    }, 
    shim: 
    { 
     'foundation': { 
      deps: ['jquery'] 
     }, 
     'foundation-init': { 
      deps: ['foundation'] 
     } 
    } 
}); 

然後，總是在主文件，我包括基金會：

require(['foundation-init']); 

的問題是，例如，頂欄不會擴大（jQuery的動畫）像它應該做的（見這裏：http://foundation.zurb.com/docs/navigation.php#topbarEx）。這就像基金會的jQuery插件沒有正確加載。據我所知，這就是爲什麼在基金會文檔腳本加載在主體的末尾。但是，顯然，使用RequireJS它有點複雜。我暫時固定的建議一樣在RequireJS文檔（「加載代碼頁加載後」部分），設定這樣的超時：

setTimeout(function() { require(['foundation-init']); }, 500); 

我不認爲這是一個很好的解決方案。任何想法？

Answer 1

好吧，我解決了這個問題，小黑客！

正如我所假設的那樣，問題在於，使用Backbone進行視圖渲染後的新DOM部分的基礎jQuery事件沒有綁定。

我的解決辦法是創建一個新的插件功能.foundation()，它已被應用到DOM的一部分以在其上初始化基金會。

;(function ($, window, undefined) { 
    'use strict'; 

    var $doc = $(document), 
     Modernizr = window.Modernizr; 

    $(document).ready(function() { 
    $.fn.foundationAlerts   ? $doc.foundationAlerts() : null; 
    $.fn.foundationButtons   ? $doc.foundationButtons() : null; 
    $.fn.foundationAccordion  ? $doc.foundationAccordion() : null; 
    $.fn.foundationNavigation  ? $doc.foundationNavigation() : null; 
    $.fn.foundationTopBar   ? $doc.foundationTopBar() : null; 
    $.fn.foundationCustomForms  ? $doc.foundationCustomForms() : null; 
    $.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null; 
    $.fn.foundationTabs    ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null; 
    $.fn.foundationTooltips   ? $doc.foundationTooltips() : null; 
    $.fn.foundationMagellan   ? $doc.foundationMagellan() : null; 
    $.fn.foundationClearing   ? $doc.foundationClearing() : null; 

    $.fn.placeholder    ? $('input, textarea').placeholder() : null; 
    }); 

    // UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids 
    // $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'}); 
    // $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'}); 
    // $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'}); 
    // $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'}); 

    // Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking). 
    if (Modernizr.touch && !window.location.hash) { 
    $(window).load(function() { 
     setTimeout(function() { 
     window.scrollTo(0, 1); 
     }, 0); 
    }); 
    } 

})(jQuery, this); 

到：：所以，我從修改的文件app.js基金會包

;(function ($, window, undefined) { 
    'use strict'; 

    $.fn.foundation = function() { 
    $.fn.foundationAlerts   ? $(this).foundationAlerts() : null; 
    $.fn.foundationButtons   ? $(this).foundationButtons() : null; 
    $.fn.foundationAccordion  ? $(this).foundationAccordion() : null; 
    $.fn.foundationNavigation  ? $(this).foundationNavigation() : null; 
    $.fn.foundationTopBar   ? $(this).foundationTopBar() : null; 
    $.fn.foundationCustomForms  ? $(this).foundationCustomForms() : null; 
    $.fn.foundationMediaQueryViewer ? $(this).foundationMediaQueryViewer() : null; 
    $.fn.foundationTabs    ? $(this).foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null; 
    $.fn.foundationTooltips   ? $(this).foundationTooltips() : null; 
    $.fn.foundationMagellan   ? $(this).foundationMagellan() : null; 
    $.fn.foundationClearing   ? $(this).foundationClearing() : null; 
    $.fn.placeholder    ? $(this).find('input, textarea').placeholder() : null; 
    }; 

    var $doc = $(document), 
     Modernizr = window.Modernizr; 

    $(document).ready(function() { 
    $doc.foundation(); 
    }); 

    // UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids 
    // $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'}); 
    // $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'}); 
    // $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'}); 
    // $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'}); 

    // Hide address bar on mobile devices (except if #hash present, so we don't mess up deep linking). 
    if (Modernizr.touch && !window.location.hash) { 
    $(window).load(function() { 
     setTimeout(function() { 
     window.scrollTo(0, 1); 
     }, 0); 
    }); 
    } 

})(jQuery, this); 

---

關於RequireJS，有必要對所有包括基金會（版本3.2.5）的插件文件而不是被縮小的。所以，我main.js看起來像這樣：

require.config({ 
    paths: 
    { 
     'jquery': 'libs/jquery/jquery', 
     'underscore': 'libs/underscore/underscore', 
     'backbone': 'libs/backbone/backbone', 
     'jquery-event-move': 'libs/foundation/jquery.event.move', 
     'jquery-event-swipe': 'libs/foundation/jquery.event.swipe', 
     'jquery-placeholder': 'libs/foundation/jquery.placeholder', 
     'foundation-modernizr': 'libs/foundation/modernizr.foundation', 
     'foundation-accordion': 'libs/foundation/jquery.foundation.accordion', 
     'foundation-alerts': 'libs/foundation/jquery.foundation.alerts', 
     'foundation-buttons': 'libs/foundation/jquery.foundation.buttons', 
     'foundation-clearing': 'libs/foundation/jquery.foundation.clearing', 
     'foundation-forms': 'libs/foundation/jquery.foundation.forms', 
     'foundation-joyride': 'libs/foundation/jquery.foundation.joyride', 
     'foundation-magellan': 'libs/foundation/jquery.foundation.magellan', 
     'foundation-media-query-toggle': 'libs/foundation/jquery.foundation.mediaQueryToggle', 
     'foundation-navigation': 'libs/foundation/jquery.foundation.navigation', 
     'foundation-orbit': 'libs/foundation/jquery.foundation.orbit', 
     'foundation-reveal': 'libs/foundation/jquery.foundation.reveal', 
     'foundation-tabs': 'libs/foundation/jquery.foundation.tabs', 
     'foundation-tooltips': 'libs/foundation/jquery.foundation.tooltips', 
     'foundation-topbar': 'libs/foundation/jquery.foundation.topbar', 
     'foundation-app': 'libs/foundation/app', 
    }, 
    shim: 
    { 
     'underscore': { 
      deps: ['jquery'], 
      exports: '_' 
     }, 
     'backbone': { 
      deps: ['underscore'], 
      exports: 'Backbone' 
     }, 
     'models/User': { 
      deps: ['backbone', 'environment'], 
      exports: 'User' 
     }, 
     'models/Token': { 
      deps: ['backbone', 'environment'], 
      exports: 'Token' 
     }, 
     'jquery-event-move': { 
      deps: ['jquery'] 
     }, 
     'jquery-event-swipe': { 
      deps: ['jquery'] 
     }, 
     'jquery-placeholder': { 
      deps: ['jquery'] 
     }, 
     'foundation-modernizer': { 
      deps: ['jquery'] 
     }, 
     'foundation-accordion': { 
      deps: ['jquery'] 
     }, 
     'foundation-alerts': { 
      deps: ['jquery'] 
     }, 
     'foundation-buttons': { 
      deps: ['jquery'] 
     }, 
     'foundation-clearing': { 
      deps: ['jquery'] 
     }, 
     'foundation-forms': { 
      deps: ['jquery'] 
     }, 
     'foundation-joyride': { 
      deps: ['jquery'] 
     }, 
     'foundation-magellan': { 
      deps: ['jquery'] 
     }, 
     'foundation-media-query-toggle': { 
      deps: ['jquery'] 
     }, 
     'foundation-navigation': { 
      deps: ['jquery'] 
     }, 
     'foundation-orbit': { 
      deps: ['jquery'] 
     }, 
     'foundation-reveal': { 
      deps: ['jquery'] 
     }, 
     'foundation-tabs': { 
      deps: ['jquery'] 
     }, 
     'foundation-tooltips': { 
      deps: ['jquery'] 
     }, 
     'foundation-topbar': { 
      deps: ['jquery'] 
     }, 
     'foundation-app': { 
      deps: [ 
       'jquery', 
       'jquery-event-move', 
       'jquery-event-swipe', 
       'jquery-placeholder', 
       'foundation-modernizr', 
       'foundation-alerts', 
       'foundation-buttons', 
       'foundation-clearing', 
       'foundation-forms', 
       'foundation-joyride', 
       'foundation-magellan', 
       'foundation-media-query-toggle', 
       'foundation-navigation', 
       'foundation-orbit', 
       'foundation-reveal', 
       'foundation-tabs', 
       'foundation-tooltips', 
       'foundation-topbar', 
      ] 
     }, 
    } 
}); 

// Requiring Foundation framework 
require(['foundation-app']); 

// Instantiating MVC 
require([ 
    'app', 
], function(App) 
{ 
    App.initialize(); 
}); 

---

最終，使骨幹觀點與基金會（至少在新的DOM部分）正確渲染，我做這樣的：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'foundation-app' 
], function($, _, Backbone) 
{ 
    var FoundationView = Backbone.View.extend(
    { 
     el: $('#view-placeholder'), 

     initialize: function() 
     { 
      this.on('post-render', this.onPostRender, this); 
     }, 

     render: function(content) 
     { 
      var content = 'new dom section'; 
      $(this.el).html(content); 

      this.trigger('post-render'); 
     }, 

     onPostRender: function() 
     { 
      $(this.el).foundation(); 
     } 
    }); 

    return FoundationView; 
});