如何以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屋!