Zurb Foundation 3 + RequireJS: plugins loading problems - requirejs

Question

I'm trying to load Zurb Foundation 3 with RequireJS. Here's my configuration section:
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']
}
}
});
Then, always in the main file, I include Foundation:
require(['foundation-init']);
The problem is that, for example, the top-bar doesn't expand (jquery animation) like it should do (see here: http://foundation.zurb.com/docs/navigation.php#topbarEx). It's like the Foundation jQuery plugins are not correctly loaded. As I read, that's the reason why in the Foundation doc the scripts are loaded at the end of the body. But, obviously, with RequireJS it's a little more complex. I've temporarily fixed like suggested in the RequireJS doc ("Loading Code After Page Load" section), setting a timeout like that:
setTimeout(function() { require(['foundation-init']); }, 500);
I don't think it's a good solution. Any idea?

Answer 1

Ok, I resolved the problem with a little hack!
As I supposed, the problem was that the new DOM section after the view rendering with Backbone, has Foundation jQuery events not binded.
My solution is to create a new plugin function .foundation(), which has to be applied to a section of the DOM for initializing Foundation on it. So, I modified the file app.js of the Foundation package from:
;(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);
to:
;(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);
About RequireJS, it's necessary to include all the Foundation (ver 3.2.5) plugins file and not the minified one. So, my main.js looks like that:
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();
});
In the end, to make the Backbone views to render correctly with Foundation (at least with new DOM sections), I do like that:
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;
});