hottowel (durandal) + typescript

I had the same problem with the DurandalTypescriptExample.However the code in this project demonstrated how you can implement your typescript code in the viewmodel file, if you only make sure to dispose publicly the durandal requied variables. At least the activate function and the title variable.

See the code example below:

/// <reference path="../../dts/knockout/knockout.d.ts" //>export class ViewModel {    title: string =  'Home View';    MyTitle: KnockoutObservableString; //MyTitle can be referenced in home.html as vm.MyTitle    public activate() {         this.MyTitle = ko.observable(this.title + " with my ko title");         return true;    }}export var vm = new ViewModel();//The Durandal plugin-interface variablesexport var title = vm.title;export var activate = function () { return vm.activate(); };

Since I found no ready made project to demonstrate this I had to make my own.See my version of the Hot Towel project on github:

https://github.com/Svakinn/TypeTowel

If you export something in global scope you are in external module land and you need a third party library to manage your modules.

I recommend you use RequireJS. Basically the following typescript:

export function f(){}

generates the following js:

function f() {}exports.f = f;

exports is a variable defined by a third party module loader. If you do not have such a module loader then exports is undefined. The tutorial of mine explains it further.

I find it easier to export the class as the requirejs/durandal module. by using the following export statement:

    export = ClassName;

this allows us to implement interfaces or maybe even extend a view model base class (not sure about the extend part) without repeating the export xxx... code for every single function we want to include in the module.

give it a try.

A working example:

    // Durandal "test" view model definition using typescript    import dialog = require("plugins/dialog")    class Test {        title: string = 'test';        public activate() {            dialog.showMessage("the test is working!");            return true;        }    }    // Instead of using code like:    // export var instance = new Test();    // export var activate = function() { return instance.activate(); }    // .. more Durandal specific overrides...    // Simply use...    export = Test;