I’m working on mobile application with Apache Cordova (http://cordova.apache.org) technology. And one of the tasks was to load JSON localization file from content folder. First idea and actually most correct (as for me) is to load file with RequireJS text plugin (https://github.com/requirejs/text).
Plugin allows to load text file in the same way as usual modules and do not evaluate content, but return it as a sting. So you just specify something like following.
[code lang=js]
require(["some/module", "text!some/module.html"],
function(module, html, css) {
//the html variable will be the text
//of the some/module.html file
}
);
[/code]
When using TypeScript we can write
[code lang=js]
import html = require("text!some/module.html");
document.body.innerHTML = html;
[/code]
And this will give us following JS code of the module (In case of AMD mode in compiler)
[code lang=js]
define(["require", "exports", "text!some/module.html"],
function (require, exports, html) {
document.body.innerHTML = html;
});
[/code]
Unfortunately it’s not enough in case of localization, because we have to load specific html file for specific locale (text!/locale/en/module.html). And we have to select the path dynamically depending on selected locale. In JS we can write following.
[code lang=js]
define(["require", "exports","someService"],
function (require, exports, someService) {
var locale = someService.getLocale();
require(["text!/" + locale + "/en/module.html"],
function(html){
document.body.innerHTML = html;
});
});
[/code]
First it was not absolutely clear for me how to do in TypeScript. There is no explicit import of RequireJS in typescript and require is a keyword used as part of module declaration. I’ve tried to find some description for my case, but without any success. Fortunately solution is much simpler that I thought:
1. You should add requre.d.ts typing to your project (or to compiler command line)
2. Than just write following TypeScript
[code lang=css]
var locale = someService.getLocale();
require(["text!/" + locale + "/en/module.html"],
html => document.body.innerHTML = html);
[/code]
And this will give exactly the same code as in JS sample above. And you can ignore editor warning about keyword require, just compile the project and you will get no errors. Please note that I’ve tested this with TypeScript 1.4 compiler and with MS Visual Studio 2013. And don’t forget to use array of string as first argument of require, but not string as in another require syntax.
If you have any other idea how to make it working please add comments.