问题描述
我继承了一个使用magento和foundation的项目。我在此基础上加入了requirejs和backbone，我正在努力让基础轨道库工作，通过主干中的hogan（渲染）加载到dom中。
I inherited a project that is using magento and foundation. I incorporated requirejs and backbone on top of this and I am trying to get a foundation orbit gallery working that is being loaded into the dom via hogan (render) in backbone.
我遇到的问题是基础已经被全局加载到其中一个magento模板中，当我在requirejs中渲染幻灯片时，轨道库已经被构建，因此它没有显示幻灯片指示符。
The problem I am having is that foundation is already being loaded globally in one of the magento templates and when I render the slides in requirejs, the orbit gallery has already been built so it is not displaying the slide indicators.
基本上，我需要能够调用$（document）.foundation（）;从我的骨干视图里面，每当我更换幻灯片时，都会以某种方式重新初始化轨道容器。
Basically, I need to be able to call $(document).foundation(); from inside my backbone view in order to re-initialize the orbit container somehow whenever I change the slides.
这是从magento dom底部加载的内容，
Here is what is being loaded at the bottom of the dom from magento,
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.min.js"></script>
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.interchange.js"></script>
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.reveal.js"></script>
这是我的requirejs视图的要点以及我想要实现的目标
Here is the gist of my requirejs view and what I am trying to accomplish
define([
'generics/genericView',
'foundation',
'text!carousel.tpl'
], function(
GenericView,
foundation,
visualCarouselTpl
) {
return GenericView.extend({
'el': 'html',
'events': {
},
render: function() {
var rederedTpl = Hogan.compile(visualCarouselTpl).render({"myImages": imagePaths});
$(".my-carousel").prepend(rederedTpl);
$(document).foundation();
},
initialize: function (params) {
this.render();
return this;
},
});
});
这是模板
<ul data-orbit>
{{#myImages}}
<li>
<a href="#">
<img src="{{src}}" alt="{{alt}}" />
</a>
</li>
{{/myImages}}
</ul>
在这个特定的例子中，我需要另一个基础副本才能让这个模块看到什么基础是我打电话给 $（文件）.foundation（）; 。这似乎创造了旋转木马，但我认为指标并不存在，因为在渲染轮播后幻灯片被包含在内。
In this particular example, I am requiring another copy of foundation in order for this module to see what "foundation" is when I call $(document).foundation();. This seems to create the carousel, but the indicators are not there I believe because the slides are being included after the carousel is rendered.
总结一下，我需要成为能够执行以下操作之一（最好是第一个）
To sum up, I need to be able to do one of the following (preferably the first one)
- 将全局基础api合并到require中并使用它重新初始化obit gallery。
- 要求所有相同的基础文件，并通过这种方式重新初始化轨道库。但是我不想在可能的情况下两次加载基础库，所以我需要弄清楚如何从dom中删除那些基础库。虽然我想我可以加载它们两次，如果它更容易。
到目前为止，我试图调用 $ （文件）.foundation（）; 无论是否包含在require中。不包含在require中时会出现javascript错误（因为它没有看到基础），并且存在javascript错误
So far I have tried to call $(document).foundation(); both with and without it being incorporated into require. There is a javascript error when not including it into require (because it does not see foundation), and there is a javascript error of
当基金会处于需要状态时。
When foundation is in require.
推荐答案
这是使用，它是一个小插件，也可以修改jQuery对象。
Here's a recreation of your problem using jquery.cookie, it's a small plugin that modifies the jQuery object also.
在此示例中，通过< script> 添加了一个全局jQuery，这是版本 2.2.4 ，并且在RequireJS配置中，还有另一个， 3.2.1 。这样我们可以比较。
In this example, there is a Global jQuery added via <script>, this is version 2.2.4, and within the RequireJS configuration, there is another, which is 3.2.1. This way we can compare.
运行代码，看看会发生什么。
Run the code and see what happens.
var globaljQuery = jQuery;
require.config({
paths: {
"jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min",
"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min"
}
});
require(['jquery-cookie'], function() {
console.log("Old Global jQuery Version: " + globaljQuery().jquery);
console.log("Old Global Cookie add-on exists: " + Boolean(globaljQuery.cookie));
console.log("New Global jQuery Version: " + jQuery().jquery);
console.log("New Global Cookie add-on exists: " + Boolean(jQuery.cookie));
});<!-- Global jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>此插件case，了解它是在AMD环境中并使用RequireJS来访问jQuery。现在已经创建了2个jQuery对象，不幸的是只有1个被修改为包含插件。
The plugin in this case, understands it is in an AMD environment and uses RequireJS to access jQuery. Now 2 jQuery objects have been created, and unfortunately only 1 modified to include the plugin.
在你的情况下，你现在不能删除全局变量，但你的解决方案应该是在RequireJS上下文中使用全局变量。
In your case, you cannot remove the globals right now, but your solution should be to use the globals within the RequireJS context.
这可以通过两种方式完成：
This can be done in 2 ways:
A）创建带有此代码的模块：
A) Create a module with this code:
define(function() { return jQuery; });
然后使用路径配置指向 jquery 那里。
and then use your path config to point jquery there.
B）稍微清楚的是使用配置选项：
B) Slightly cleaner is to use the callback configuration option:
require.config({
callback: function() {
define('jquery', function() { return jQuery; });
},
...
看到它的实际效果：
var globaljQuery = jQuery;
require.config({
callback: function() {
define('jquery', function() { return jQuery; });
},
paths: {
"jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min",
"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min"
}
});
require(['jquery-cookie', 'jquery'], function(cookiePlugin, requiredjQuery) {
console.log("Old and New Global jQuery equal?: " + (globaljQuery === jQuery));
console.log("Global and Required jQuery equal?: " + (jQuery === requiredjQuery));
});<!-- Global jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>这篇关于当我在requirejs中时，如何调用全局加载的api？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！