如何以 AMD 方式集成 Foundation 3

EDIT 4

有一个模块定义在（来​​自Foundation 3包裹）app.js:

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

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

    $(document).ready(function() {
        $.fn.foundationAlerts ? $doc.foundationAlerts() : null;
        // ...
        $.fn.foundationClearing ? $doc.foundationClearing() : null;

        $('input, textarea').placeholder();
    });
    // touch support detction is omitted
})(jQuery, this);

我尝试将其解释为下一种形式：

引导程序.JS

require.config({
    paths: {
        // other paths then..
        'foundation': '../libs/zurb'
    },
    shim: {
        'foundation/jquery.foundation.topbar': { deps: ['jquery'] },
        'foundation/jquery.foundation.accordion': { deps: ['jquery'] },
        // ..all that stuff..
        'foundation/jquery.placeholder': { deps: ['jquery'] }
    }
});

require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.initialize();
    });
});

APP.JS

嗯..我发现这并不像预期的那样工作：

define(
    [
        'jquery',
        'underscore',
        'backbone',
        'routing/AppRouter',
        'foundation/modernizr.foundation',
        'foundation/jquery.foundation.accordion',
        // all that foundation scripts...
        'foundation/jquery.placeholder'
    ],
    function($, _, Backbone, AppRouter) {
        return {
            initialize: function() {
                var $doc = $(document);

                // these things fail
                $.fn.foundationAccordion ? $doc.foundationAccordion() : null;
                // ...
                $.fn.placeholder ? $('input, textarea').placeholder() : null;

                // this works great!
                $('#slider').orbit();

                // router/controller initialization
                AppRouter.initialize();
            }
        };
    }
);

当页面加载时，人们可以看到foundation'sui 元素根本不起作用（手风琴不展开其面板等）。

当我进入时$(document).foundationAccordion()在 Chrome 控制台中（页面已加载）启用UI elements在一页上。

Help!!

当您触发初始化程序时，请确保 100% 您想要使用基础插件添加的所有 DOM 元素已经在主 DOM 树中。在我看来，您正在动态创建带有主干和模板的界面，但 Foundation 似乎没有准备好这种方法。查看代码，它看起来更多地针对静态页面，而不是高度动态的单页应用程序。

不是使用基础的专家，但我会尝试在路由器初始化之后移动基础脚本的初始化，我假设第一个视图被渲染以确认我的假设。但我担心它不会自动为整个应用程序工作，每次您重新绘制或动态创建使用基础组件的新视图时，您都必须将至少一些脚本重新应用到 dom 元素，因为它们赢了不适用于应用程序生命周期后期动态创建的元素。

一些脚本正在使用文档中的委托，并且应该始终工作 - 就像警报组件一样，但其他脚本（例如手风琴）将无法工作，除非在手风琴元素之后调用（强制accordion class) 被插入到 DOM 树中 - 所以在骨干视图插入主 DOM 树之前作为分离节点的一部分不算数，除非您修改基础插件，该插件不支持将折叠行为附加到具有不同选择器的元素或分离中的元素DOM 节点

我建议您查看所有基础插件的源文件，以了解它们如何工作以及如何在单页应用程序的上下文中驯服它们，因为它们的实现质量与我在快速查看中看到的有很大差异。在他们的 github 上查看 https://github.com/zurb/foundation/tree/master/vendor/assets/javascripts/foundation.