BIC-jQM and Require.JS
- Ray Pearce (Unlicensed)
This project uses Require.JS to lazy-load components as they are needed, and to enable the development of isolated modules. As such, any JavaScript code you add to this environment may need minor adjustments before it will actually execute as intended.
This is different to BIC v2, where you could rely on jQuery and jQuery UI being available to your code at any time. In BIC-jQM, jQuery and jQuery Mobile are loaded asynchronously and non-deterministically. Unless you use the Require.JS API, you cannot depend on these libraries being available.
Examples
If your code requires jQuery, then you should declare that you need jQuery so that your code is executed only after it is available.
require(['jquery'], function ($) {
/* insert your code that uses jQuery */
});
If your code requires access to the BIC-jQM JavaScript APIs, then you need to declare that, too.
require(['bic'], function (bic) {
/* bic === BMP.BIC */
/* insert your code that uses BMP.BIC or bic */
});
Rather than nest your calls to require for code that needs multiple libraries, you can declare them in one step.
require(['jquery', 'bic', 'jquerymobile'], function ($) {
/* insert your code that uses BMP.BIC */
/* insert your code that uses jQuery */
/**
* jQuery Mobile is accessible via $.mobile as per
* http://api.jquerymobile.com/
*/
});
Adding non module javascript to BIC-JQM )BIC3) using require.js config
// When adding javascript code not declared in a module to BIC-JQM ( BIC3)
// You need to register your code with require.js
// This file should be added to the answerSpace setup ->Load external javascript
// This example will load and register "Itemslide" http://itemslide.github.io/docs/index.html library stored in the assets manager.
require.config({
paths: {
// tell Require.js where to find itemslide
itemslide: 'https://d2g691qpj752hh.cloudfront.net/cre8/ontelecom/itemslide.min'
// note: Require.js adds a ".js" to the end for us
},
shim: {
// tell Require.js that itemslide needs jQuery
itemslide: {
deps: ['jquery'],
exports: '$.fn.itemslide'
}
// note: this is only needed because itemslide is not a module
}
});
https://github.com/blinkmobile/examples/blob/master/javascript/require_config.js
require.js config
At times you may need to add some javascript to your answerSpace which is not an AMD (Asynchronous module definition )
You will need to register this code functions with require.js .
Example (itemslide.js)
Itemslide.js is a A simple and beautiful touch carousel but its not a registered AMD.
require.js will need to know how to handle calls to it so we need to config require.js .
What this file does is load up the require.js config and registers the itemslide javascript to require jquery mobile.
require.config({
paths: {
// tell Require.js where to find itemslide
itemslide: 'https://d2g691qpj752hh.cloudfront.net/cre8/ontelecom/itemslide.min'
// note: Require.js adds a ".js" to the end for us
},
shim: {
// tell Require.js that itemslide needs jQuery
itemslide: {
deps: ['jquery'],
exports: '$.fn.itemslide'
}
// note: this is only needed because itemslide is not a module
}
});
Now when the answerspace calls itemslide it know that jquery will handle it.
Now you can call itemslide with javascript
<script>
require(['jquery', 'itemslide'], function($) {
$('#slider1').tinycarousel();
$("#slide-month").itemslide();
});
</script>