hottowel (durandal) + typescript

Question

this is my first post, so wish me luck :)

I want to use hot towel(durandal) + typescript , i followed these threads: - how-can-i-use-a-class-for-my-shell-viewmodel-in-durandal - how-to-use-fancybox-in-combination-with-durandal-en-typescript - incorrect-this-in-select

and also tried DurandalTypescriptExample sample

this sample does not run with this error:

"Server Error in '/' Application.

The resource cannot be found. "

at first i decided just to change my viewmodels with typescript, and after that shell either, but in both situation i got this error:

this is my shell.ts code (which i used from this sample) :

/// <reference path="../durandal/durandal.d.ts" />

import _router = module('durandal/plugins/router');
import app = module('durandal/app');

export var router = _router;

export function search() {
    app.showMessage('Search not yet implemented...');
}
export function activate() {
    return router.activate('welcome');
}

and i got this error:

- JavaScript runtime error: 'exports' is undefined

any idea?

and if its possible, workable solutions are appreciated.

thanx guys let's see what will happen.

Diplodocus

Answer 1

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 variables
export 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

Parenthesis

Answer 2

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.

Litigant

thanks, but i'm using provided sample from this forum DurandalTypescriptExample – Diplodocus

Yup. You cannot simply use one file from the sample. Run the complete sample and it will work. Because it uses RequireJS github.com/evanlarsen/DurandalTypescriptExample/tree/… – Litigant

If you want to use just that one file make sure you load RequireJS yourself – Litigant

i tried it, and i mentioned in my post, it does not run with server error and no break point hits, but i'm re downloading to see what will happen this time, did you tried it yourself? – Diplodocus

The sample works fine. You need to navigate to /Durandal instead of / – Litigant

Answer 3

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;

Zug

Answer 4

I've created a plugin for Durandal v2 that supports view loading by convention (ModuleId or ModuleId+"View"). It's available as a gist here: https://gist.github.com/Jaben/6180861

Downhearted