如何以AMD方式集成Foundation 3
编辑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);
我试着将它解释为下一个forms：
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 。
救命！！
当你触发它们的初始值设定项时，确保100％你想用基础插件调味的所有DOM元素已经在主DOM树中了。 在我看来，您正在动态创建与主干和模板的接口，但基金会似乎并没有准备好这种方法。 看一下代码，它看起来更像是静态页面，然后是高度动态的单页应用程序。
不是使用基础的专家，但我会尝试在路由器初始化之后移动基础脚本的初始化，我假设第一个视图被渲染以确认我的假设。 我担心它不会自动地为整个应用程序工作，每次你动态地重绘或创建使用基础组件的新视图时，你必须至少将一些脚本重新应用到dom元素，因为它们赢了不适用于稍后在应用程序生命周期中动态创建的元素。
有些脚本正在使用文档中的委托，并且应该始终工作 – 比如警报组件，但是除非在将手风琴元素（带有强制性accordion类） 插入到DOM树中之后调用，否则其他像手风琴一样将无法工作 – 因此成为分离的一部分骨干视图插入主DOM树之前的节点不计算，除非您修改基础插件，该插件不支持将手风琴行为附加到具有不同选择器的元素或分离的DOM节点中的元素
我建议你查看所有基础插件的源文件，看看它们是如何工作的，以及如何在单页应用程序的环境中驯服它们，因为它们的实现质量与我在快速查看中看到的相差很多。 在他们的github上查看它 。
对于非AMD模块，您需要在填充程序中明确指定exports 。 我不知道这些文件的当前内容，因此仅通过查看加载器代码来进行计算有点困难。 只是一个简单的注释，你缺少，在define， .js扩展名中，除非他们已经定义了AMD，否则你需要提供完整的路径，包括扩展名。
如果它是一个模块，requirejs只会将一个参数传递给回调。 如果不是，您将不得不全局访问它。 如果必须为每个非模块执行，那么您可以手动执行define ，但这会违反require的目的
在重读汤姆的回答后，我终于明白了！ 虽然这不是一个完整的图片我会分享我所拥有的）
我的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(); } }; });
瞧！