Search code examples
backbone.jstypescriptmarionette

Marionette Module using typescript


How to create marionete module using type script. I saw this how to write marionettejs module using typescript? but its not usefull for my case. I created module like

class TestModule extends Marionette.Module {
    constructor(options) {
        if (!options)
            options = {};
        var marionetteApp = new MarionetteApp();
        marionetteApp.module("myModule", {
            startWithParent: false
        });
        super("myModule", marionetteApp);
    }
}

but its shows error Unhandled exception at line 3561, column 5 in http://localhost/Scripts/backbone.marionette.js

0x800a138f - JavaScript runtime error: Unable to get property 'initialize' of undefined or null reference

What Im doing wrong. I am new to Marionette and typescript. What is the correct procedure to create marionette module using typescript My application code is

class MarionetteApp extends Marionette.Application {
    headerRegion: Marionette.Region;
    leftRegion: Marionette.Region;
    centerRegion: Marionette.Region;
    constructor() {
        super();
        this.on("start", this.initializeAfter);
        this.addRegions({ headerRegion:"#headerContainer",leftRegion:"#leftContainer",centerRegion:"#centerContainer"});
    }
    initializeAfter() {
        //alert("started")
        this.headerRegion.show(new HeaderView());
        this.leftRegion.show(new leftView());
        this.centerRegion.show(new CenterView());
        var MyModule = new TestModule("Test");
        //MyModule.start();
    }
}

Solution

  • I fixed the issue using following code. Wrapped module inside a class. Its working as expected. Please correct me if I am wrong and anyone knows the correct procedure

    class TestModule {
    mod: any;
    constructor() {
        var marionetteApp = new MarionetteApp();
        this.mod = marionetteApp.module("myModule", {
            startWithParent: false,
            initialize: function(){
                console.log("initialized");
            },
            define: function () {
                console.log("defined");
            }
        });
    
        this.mod.on("start", this.onStart);
    }
    start() {
        this.mod.start();
    }
    onStart() {
        console.log("Module started")
    }
    

    }

    initialization code

    var MyModule = new TestModule();
        MyModule.start();