there is my implementation for cross domain call using the requireJs text plug-in
htaccess file in the template folder of my cross-domain site
Header set Access-Control-Allow-Origin "*"
textremote.js
define(['text','module'],function (text, module) {
// Load the cross-domain url from the config
var remoteUrl = module.config().remoteUrl;
// Store the current parseName function into a var
var originalParseName = text.parseName;
// Redefine the parseName function
text.parseName = function(name) {
// Use the original parseName
var parsed = originalParseName(name);
// append the cross-domain url to parsed.moduleName
parsed.moduleName = remoteUrl+parsed.moduleName;
return parsed;
}
// Force CORS to be true
text.useXhr = function () {
return true;
}
});
In the main config (I remove the non related config)
require.config(
{
textremote : "libs/textremote",
// this config will be accessible in textremote.js through the module parameters
config : {
"textremote" : {
remoteUrl : "http://www.cross-domain-asset.com/template/"
}
},
}
)
initialization
This ensure that textremote is load first and will ovveride the text.parseUrl and text.useXhr before any usage.
require(['textremote'],function(){
require(['libs/app'], function(app){
app.initialize();
});
})
Usage example
text!demo.tpl will pass through textremote and text plugin and use http://www.cross-domain-asset.com/template/demo.tpl
// Filename: app.js
define([
'router', // Request router.js
'backbone',
'marionette',
'underscore',
'text!demo.tpl'
], function(Router,backbone,marionette,_, demoTemplate){
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
/* ... */
}
return {
initialize: initialize
};
});
That it, So far this is working well for me. But I would like to improve it or know if better approach exists.
On a side note, I will add code to allow multiple cross-domain usage and caching.