define(["require", "exports", "js/models/home","templates/home/home.html"
], function(require, exports, __model__, __homeView__) {
var model = __model__;
var homeView=__homeView__;
}
I would like to write a .ts file which will generate a js file like this.
By compiling --module amd I can import a model and also reference the jquery, backboneJs or any other js files.
But how can I import an externer html file as like requireJs does?
I put together a blog a while ago on require.js and Typescript.
http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/
In order to import text files, you will need to reference text.js, and then use the text!<...your text file> syntax, as below. Using the require.config further simplifies the use of require:
require.config({
baseUrl: '../',
paths: {
views: 'app/views',
'text': 'lib/text',
}
});
require([
'text!views/MTodoCollectionView.html'],
(MTodoCollectionViewSnippet) => {
//
});
I just found a very neat and simple solution for loading a text template with the requirejs text plugin as a typescript module:
Assuming that you configured require.js like blorkfish suggests:
require.config({
baseUrl: '../',
paths: {
views: 'app/views',
'text': 'lib/text',
}
});
You can do the following which allows it to load the text directly from within typescript:
declare module "text!views/myview.html" {}
import view = module("text!views/myview.html");
export class MyViewCtrl { //or whatever thingy you want impl in your typescript module
...
checkoutThisTemplate() {
console.log(view); //will print the template as text to console
}
...
The generated JS looks exactly like what you were after:
define(["require", "exports", "text!views/myview.html"],
function(require, exports, , __view__) {
var view = __view__;
....
I don't think the TypeScript compiler has support for this yet, although I am happy to be corrected if I'm wrong. You could start a discussion around this feature on Codeplex.
You can manually set up exactly this in a TypeScript file as long as you declare the define function.
declare function define(...params: any[]): void;
define(["require", "exports", "js/models/home","templates/home/home.html"
], function (require, exports, __model__, __homeView__) {
var model = __model__;
var homeView = __homeView__;
});
You would need to get a bit funky if you wanted type checking inside of the callback though as currently, model and homeView will be of type any. If you have a specific example I could try to create something for you around this, but I suspect it would involve adding a declaration for your module (which you could auto-generate using the flag against the TypeScript compiler).
--module amd flag on the compiler and by using ///<reference path="myfile.ts" /> instead of imports.