Equivalent of JavaScript in TypeScript

Question

Currently I am working on Durandal 2.0 project. Initially I was using this JavaScript code to execute my shell.js(ViewModel), which is working perfectly fine.

Initial JavaScript Code (working one)

    define(['plugins/router', 'durandal/app'], function (router, app) {

    return {
        router: router,
        search: function() {
            app.showMessage('Search not yet implemented...');
        },
        activate: function () {
            router.map([
                { route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
        
            return router.activate();
        }
    };
    });

Now I am trying to use typescript. So I wrote this code(below one), which is not working Typescript Code:

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />

    import _config = require('config');
    import _router = require('plugins/router');
    import _app = require('durandal/app');

    class shell {
    //config = new _config.Config();
    app = _app;
    router = _router;

    activate() {
      this.router.map([
            { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
            { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
             ]).buildNavigationModel();
          return this.router.activate();
        }
    }

Output of typescript: JavaScript code generated by TypeScript(Not Working)

    /// <reference path="../../Scripts/typescripts/jquery/jquery.d.ts" />
    /// <reference path="../../Scripts/typescripts/knockout/knockout.d.ts" />
    /// <reference path="../../Scripts/typescripts/durandal/durandal.d.ts" />
    define(["require", "exports", 'plugins/router', 'durandal/app'], function(require, exports, ___router__, ___app__) {

    var _router = ___router__;
    var _app = ___app__;

    var shell = (function () {
        function shell() {
            //config = new _config.Config();
            this.app = _app;
            this.router = _router;
        }
        shell.prototype.activate = function () {
            this.router.map([
                { route: '', title: 'Welcome', moduleId: 'viewmodels/welcome', nav: true },
                { route: 'flickr', moduleId: 'viewmodels/hello', nav: true }
        ]).buildNavigationModel();
            return this.router.activate();
        };
        return shell;
      })();
    });

Can anyone suggest me what is the issue?? the error I am getting is this,

Unable to parse bindings.

Bindings value: attr: { href: router.navigationModel()[0].hash }

Message: router is not defined;

View: views/shell;

ModuleId: viewmodels/shell

What errors are you getting during compilation, and what version of Typescript are you using? — Nafiul Islam
– Nafiul Islam, Commented Aug 22, 2013 at 15:46
You aren't returning the shell from the module, only from the constructor. — Kyeotic
– Kyeotic, Commented Aug 22, 2013 at 18:03

Jaben · Accepted Answer · 2013-08-27 12:46:28Z

2

Durandal expects an instance of the object to be returned from the module. Typescript's AMD convention is export constructor. Discussion about this problem and plugin solution here: https://github.com/BlueSpire/Durandal/pull/244

I've created Durandal v2.0 plugin to help solve the problem:

https://gist.github.com/Jaben/6180861

It will find the exported class for the view and use that if it's available.

You will also need to mark the "shell" class as export in TypeScript:

import _config = require('config');
import _router = require('plugins/router');
import _app = require('durandal/app');

export class shell {
    //....
}

edited Aug 27, 2013 at 12:46

answered Aug 22, 2013 at 15:50

Jaben

4263 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kyeotic Over a year ago

Durandal will work with instances or constructors. Take a look at this sample. The export should be all he needs to do.

Jaben Over a year ago

The question was about Durandal's resolution of TypeScript exports. The issue is well know by the author of Durandal and is outlined here: github.com/BlueSpire/Durandal/pull/13 The author acknowledged the problem and even suggested the same solution I'm providing here (a plugin). Pull request with discussion: github.com/BlueSpire/Durandal/pull/244

Kyeotic Over a year ago

That seems pretty relevant, you should put that in your answer.

Ankur · Accepted Answer · 2013-08-23 06:19:40Z

1

thanks guys for the suggestions but i have solved the problem by creating a new instance of the class at the end of the code, which is working fine.

     return new shell();

above line has been added after the class.

answered Aug 23, 2013 at 6:19

Ankur

7508 silver badges28 bronze badges

Collectives™ on Stack Overflow

Equivalent of JavaScript in TypeScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related