Zurb Foundation 3 + RequireJS: plugins loading problems -

Zurb Foundation 3 + RequireJS: plugins loading problems -

i'm trying load zurb foundation 3 requirejs. here's 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, in main file, include foundation:

require(['foundation-init']);

the problem that, example, top-bar doesn't expand (jquery animation) should (see here: http://foundation.zurb.com/docs/navigation.php#topbarex). it's foundation jquery plugins not correctly loaded. read, that's reason why in foundation doc the scripts loaded @ end of body. but, obviously, requirejs it's little more complex. i've temporarily fixed suggested in requirejs doc ("loading code after page load" section), setting timeout that:

settimeout(function() { require(['foundation-init']); }, 500);

i don't think it's solution. idea?

ok, resolved problem little hack!

as supposed, the problem new dom section after view rendering backbone, has foundation jquery events not binded.

my solution to create new plugin function .foundation(), has applied section of dom initializing foundation on it. so, modified file app.js of foundation bundle 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 line want below if want ie8 back upwards , 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, don't mess 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 line want below if want ie8 back upwards , 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, don't mess 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 include foundation (ver 3.2.5) plugins file , not minified one. so, main.js looks 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 end, create backbone views render correctly foundation (at to the lowest degree new dom sections), 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(); } }); homecoming foundationview; });

requirejs zurb-foundation