Hottowel (durandal) + typescript

Question

This is my first post, so good luck :)

I want to use a hot towel (durandal) + typescript, I followed these streams: - 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 example does not start with this error:

"Server error in application" / ".

Resource is not found. "

At first I decided to just change my view models using typescript, and after this shell too, but in both situations I got this error:

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

/// <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 see what happens.

Answer 1

I had the same issue with DurandalTypescriptExample. However, the code in this project demonstrated how you can implement your typescript code in the viewmodel if you are only sure to publicly publish the required durandal variables. At least the function activate and the title variable.

See the sample code 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 did not find a 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

Answer 2

If you export something to the global scope, you are on the outside of the module 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 the export will be undefined. My tutorial explains this further.

Answer 3

It is easier for me to export the class as a requirejs / durandal module. using the following export statement:

  export = ClassName; 

this allows us to implement interfaces or even extend the base class of the view model (not sure about the extension) without repeating the export code xxx ... for each individual function that we want to include in the module.

try it.

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; 

Answer 4

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