4

我正在尝试使用 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']
        }
    }
});

然后，总是在主文件中，我包括 Foundation：

require(['foundation-init']);

问题是，例如，顶栏没有像它应该做的那样展开（jquery 动画）（见这里： http: //foundation.zurb.com/docs/navigation.php#topbarEx）。就像 Foundation jQuery 插件没有正确加载一样。正如我所读到的，这就是为什么在 Foundation 文档中将脚本加载到 body 末尾的原因。但是，很明显，使用 RequireJS 会稍微复杂一些。我已经按照 RequireJS 文档（“页面加载后加载代码”部分）中的建议进行了临时修复，设置了这样的超时：

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

我不认为这是一个好的解决方案。任何的想法？

4

1 回答 1

3

好的，我用一个小技巧解决了这个问题！

正如我猜想的那样，问题在于使用 Backbone 进行视图渲染后的新 DOM 部分没有绑定 Foundation jQuery 事件。

我的解决方案是创建一个新的插件函数.foundation()，它必须应用于 DOM 的一部分以在其上初始化 Foundation。因此，我从以下位置修改app.js了 Foundation 包的文件：

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

到：

;(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，有必要包含所有 Foundation (ver 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();
});

最后，为了使 Backbone 视图能够使用 Foundation 正确呈现（至少使用新的 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;
});
于 2013-02-22T12:40:03.640 回答