4

Zurb Foundation 3 に RequireJS をロードしようとしています。ここに私の設定セクションがあります：

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 docでスクリプトが body の最後にロードされる理由です。しかし、明らかに、RequireJS の場合はもう少し複雑です。RequireJS ドキュメント (「ページの読み込み後にコードを読み込む」セクション) で提案されているように一時的に修正し、次のようなタイムアウトを設定しました。

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

私はそれが良い解決策だとは思わない。何か案が？

4

1 に答える 1

3

わかりました、ちょっとしたハックで問題を解決しました!

私が推測したように、問題は、Backbone でビューをレンダリングした後の新しい DOM セクションに、Foundation jQuery イベントがバインドされていないことでした。

私の解決策は、Foundation を初期化するために DOM のセクションに適用する必要がある新しいプラグイン関数を作成する.foundation()ことです。そこで、app.jsFoundation パッケージのファイルを次のように変更しました。

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

最後に、バックボーン ビューを 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 に答える