如何以 AMD 方式集成 Foundation 3答案

【问题标题】：How do I integrate Foundation 3 in an AMD manner如何以 AMD 方式集成 Foundation 3
【发布时间】：2012-11-26 12:08:08
【问题描述】：

编辑 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);

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

BOOTSTRAP.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's ui 元素根本不起作用（手风琴不会展开其面板等）。

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

救命！！

【问题讨论】：

标签： javascript jquery requirejs zurb-foundation

【解决方案1】：

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

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

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

我建议您查看所有基础插件的源文件，以了解它们的工作原理以及如何在单页应用程序的上下文中驯服它们，因为它们的实现质量与我快速看到的相差很大看。 Check it out on their github.

【讨论】：

【解决方案2】：

对于非 AMD 模块，您需要在 shim 中明确指定 exports。我不知道这些文件的当前内容，因此仅通过查看加载程序代码有点难以理解。快速说明一下，在定义中缺少 .js 扩展名，除非它们已经定义 AMD，否则您需要提供完整路径，包括扩展名。

requirejs 只会将参数传递给回调，如果它是一个模块。如果不是，您将不得不全局访问它。如果您必须为每个非模块执行defines，您可以手动执行，但这违背了require 的目的

【讨论】：

【解决方案3】：

重读汤姆的答案后，我终于明白了！虽然这不是一张完整的图片，但我会分享我所拥有的）

我的bootstrap.js 文件已更改：

paths: {
    // things like json2, underscore, jquery, backbone are ommited..
    'fn': '../libs/zurb'
},
shim: {
    'fn/jquery.foundation.accordion': {
        deps: ['jquery'], exports: 'jQuery.fn.foundationAccordion'
    },
    // ...
    'fn/jquery.foundation.orbit': {
        deps: ['jquery'], exports: 'jQuery.fn.orbit'
}

因此，深入了解每个基金会的脚本以了解它们的内容确实很有帮助。

然后我可以写出以下内容：

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'list',
            'products/page/:page': 'list'
        }
    });

    var renderSlider = function() {
        // pay attention here
        require(['views/SliderView', 'fn/jquery.foundation.orbit'], function(SliderView, orbit) {
            $('#slider-wrapper .twelve.columns').prepend(new SliderView().el);
            $('#slider').orbit();
        });
    };

    var renderProductsList = function(page) {
        require(['collections/ProductsList', 'views/ProductListView', 'fn/jquery.foundation.accordion'], function(ProductsList, ProductListView, foundationAccordion) {
            var p = page ? parseInt(page, 10) : 1;
            var productsList = new ProductsList();

            productsList.fetch({
                success: function() {
                    $("#content").html(new ProductListView({ model: productsList, page: p }).el);
                    // pay attention here
                    $(document).foundationAccordion();
                },
                error: function() {
                    console.log('error!');
                }
            });
        });
    }

    var initialize = function() {
        var appRouter = new AppRouter();

        appRouter.on('route:list', function(page) {
            renderSlider();
            renderProductsList(page);
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

然后我把所有这些都包装在里面：

define(['jquery', 'underscore', 'backbone', 'routing/AppRouter'], function($, _, Backbone, AppRouter) {
    return {
        initialize: function() {
            AppRouter.initialize();
        }
    };
});

瞧！！！

【讨论】：