如何以AMD方式集成Foundation 3 [英] How do I integrate Foundation 3 in an AMD manner

问题描述

编辑4

在（来自 Foundation 3 包中定义了一个模块） app.js ：

There's a module defined in (from Foundation 3 package) 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);

我试图将其解释为下一个表格：

I tried to interpret it to the next form:

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

嗯..我发现这不能按预期工作：

Well.. I found that this doesn't work as it was expected:

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

当页面加载时，可以看到基础的 ui元素根本不起作用（手风琴不扩展其面板等）。

When the page gets loaded one can see that foundation's ui elements don't work at all (accordion doesn't expand its panels etc).

当我输入 $（文件）时。 Chrome控制台中的foundationAccordion（）（页面已被时间加载）它在页面上启用 UI元素。

When I entered $(document).foundationAccordion() in Chrome console (page had been loaded by the time) it enabled UI elements on a page.

帮助!!

推荐答案

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

After rereading Tom's answer I finally got it! Though this is not a complete picture I'll share what I've got)

我的 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'
}

所以查看基金会的每个脚本以查看它们的内容是非常有用的。

So it was trully helpful to look inside each of foundation's scripts to see what they've got.

然后我能够写下以下内容：

Then I was able to write the following:

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

然后我把所有这些包裹在内：

Then I just wrapped all of this within:

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

Voila !!!

Voila!!!

这篇关于如何以AMD方式集成Foundation 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！