How can I call an api that has been loaded globally while I am inside requirejs?
I inherited a project that uses magento and framework. I have included requirejs and a spine on top of this and I am trying to create a working orbit base framework that loads into the dom via hogan (render) into the spine.
The problem is the foundation is already loaded globally in one of the magento templates and when I make slides in requirejs the orbit gallery is already built so it doesn't display slide indicators.
Basically, I need to be able to call $ (document) .foundation (); from inside my spine to re-initialize the orbit container somehow whenever I change slides.
Here is what is loaded at the bottom of the bottom 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>
Here is the gist of my requirejs request 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;
},
});
});
And here is the template
<ul data-orbit>
{{#myImages}}
<li>
<a href="#">
<img src="{{src}}" alt="{{alt}}" />
</a>
</li>
{{/myImages}}
</ul>
In this particular example, I need another copy of the foundation so that this module can see what the “foundation” is when I call $(document).foundation();
. This seems to create a carousel, but the indicators don't believe it because the slides are included after the carousel.
To summarize, I need to be able to do one of the following (preferably the first)
- Include the global api in the request and use it to reinitialize the obit gallery.
- Require all the same foundation files by querying and reinitializing the orbit gallery this way. However, I don't want to load the fund libraries twice if possible, so I will need to figure out how to remove them from the dom first on this one. Although, I think I could load them twice if it was easier.
So far I've tried calling $(document).foundation();
with and without it, which was included in require. There is a javascript error if not include it in require (because it doesn't see the framework) and there is a javascript error
When a foundation is required.
source to share
Here's a re-creation of your problem with jquery.cookie , this is a little plugin that also modifies the jQuery object.
In this example, the global jQuery is added via <script>
, this is version 2.2.4 , and there is another in the RequireJS config, 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>
The plugin in this case understands that it is in the AMD environment and uses RequireJS to access jQuery. Now 2 jQuery objects have been created and unfortunately only 1 changed to include the plugin.
In your case, you cannot remove the global blocks right now, but your solution should be to use the globals in the RequireJS context.
This can be done in two ways:
A) Create a module with this code:
define(function() { return jQuery; });
and then use config path
to point jquery
there.
B) Slightly cleaner is to use the callback option :
require.config({
callback: function() {
define('jquery', function() { return jQuery; });
},
...
See it in action:
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>
source to share