如何使用打字稿编写marionettejs模块? [英] how to write marionettejs module using typescript?

问题描述

我正在尝试使用Typescript编写MarionetteJS模块.应使用RequireJS将已编译的模块添加到普通javascript应用程序中，并初始化为普通的木偶模块，即:

I'm trying to write MarionetteJS module using Typescript. Compiled module should be added to plain javascript application using RequireJS and initialized as normal Marionette module i.e.:

define(
['marionette', 'modules/sample/sample'],
function (Marionette, Sample) {
    var sampleApp = new Backbone.Marionette.Application();
    sampleApp.SampleModule = sampleApp.module("SampleModule", Sample.Sample);
}

我的模块已创建，但Marionette.Appplication并未调用初始化函数和启动函数.

My module is created, but initializer and start functions are not being called by Marionette.Appplication.

这是我的TypeScript类:

This is my TypeScript class:

/// <amd-dependency path="backbone" />
/// <amd-dependency path="marionette" />
/// <amd-dependency path="jquery" />
/// <amd-dependency path="underscore" />
/// <reference path="../../vendor/ts/backbone/backbone.d.ts" />
/// <reference path="../../vendor/ts/marionette/marionette.d.ts" />
/// <reference path="../../vendor/ts/jquery/jquery.d.ts" />
/// <reference path="../../vendor/ts/underscore/underscore.d.ts" />

export class Sample{

    constructor(public self:Marionette.Module, public app:Marionette.Application, public Backbone:Backbone, public Marionette:Marionette, public $:"jquery", public _:"underscore") {
        console.log("Sample.constructor");
        self.addInitializer(this.init);
    }

    init(options?:any) {
        console.log("Sample.init!");
    }

    start() {
        console.log("Sample.start");
    }

}

该代码编译为:

define(["require", "exports", "backbone", "marionette", "jquery", "underscore"], function(require, exports) {
    var Sample = (function () {
        function Sample(self, app, Backbone, Marionette, $, _) {
            this.self = self;
            this.app = app;
            this.Backbone = Backbone;
            this.Marionette = Marionette;
            this.$ = $;
            this._ = _;
            console.log("Sample.Sample!!!! %o %o", self, app);
            self.addInitializer(this.init);
        }
        Sample.prototype.init = function (options) {
            console.log("Sample.Sample.init!");
        };

        Sample.prototype.start = function () {
            console.log("Sample.Sample.start");
        };
        return Sample;
    })();
    exports.Sample = Sample;
});

用javascript编写的简单模块如下所示:

while simple module written in javascript looks like that:

define(['text!./tpl.html'], function (tpl) {
    var Generic = function (self, app, Backbone, Marionette, $, _) {
        self.addInitializer(function (options) {
            console.log('Generic initialized %o', options);
        };
    };
    return Generic;
});

我可以使用Typescript编写MarionetteJS模块吗?有人有例子吗?任何帮助表示赞赏.

Can i write MarionetteJS module using Typescript? Does anyone has some examples? Any help appreciated.

谢谢

推荐答案

   class FoobarView extends Marionette.ItemView<Backbone.Model> {

        constructor(options?:any) {

            _.extend(options, {
               template: some_template_retriever_function('templatePath.html'),
               className: 'class-name'
            });

            this.behaviors = <any>{
                'somebehaviors' : {},
            };

            super(options);
        }

        serializeData():any {

        }

        show():void {
        }


    }

    export = FoobarView;

这将在编译后生成一个模块，可以将其直接导入到您命名的任何模块中

This will produce a module, after compiling, that can be imported directly to anything you name it

import FooBarView = require('Path/to/FoobarView');

// now you can instantiate this view

var view = new FooBarView({some:options});

当然，请记住顶部的打字参考

of course, remember your typings reference at the top

/// <reference path="../../vendor/ts/marionette/marionette.d.ts" />    

这篇关于如何使用打字稿编写marionettejs模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！