Question

我正在尝试使用Typescript编写MarionetteJS模块。应使用RequireJS将编译模块添加到普通的javascript应用程序中，并将其初始化为普通的Marionette模块，即：

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

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

这是我的TypeScript类：

/// <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编写的简单模块看起来像这样：

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模块吗？有没有人有一些例子？任何帮助表示赞赏。

由于

Answer 1

   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;

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

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

// now you can instantiate this view

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

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

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

Answer 2

旧问题，无论如何，使用TypeScript 2，requireJS，经过几次尝试＆amp;错误我让它发挥作用。 但在我列出我已完成的所有事情之前，我必须将您的第一个代码段注释掉

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

我不同意这个，因为您使用requireJS定义了一个模块（使用require.define和Marionette.Module 在我看来，你应该使用其中之一，而不是两者......因为我会使用requireJS来定义一个模块，我会把你的代码片段写成

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

话虽如此，我的工作方式 假设你有一个require.config对像这样的木偶图库别名

// file : require-config.ts 
require.config({
   paths: {
      "marionette" : "https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.2.0/backbone.marionette"
      // + all the other 3rd party JS libraries
   }
});

关于你定义marionette的TS文件，你定义了自己的文件，要么使用npm install --save @types\backbone.marionette。

记录，因为我的项目依赖于较旧版本的backbone.marionette，我必须自己编写，基于返回此类npm命令时定义的内容 使用npm命令，还有一些额外的工作可以使它工作 - 但这绝对不是这里的目的 完成此操作后，您可以按原样编写示例模块

// file : SampleModule.ts
/// <amd-module name="SampleModule" />
import marionette = require("marionette");
export = new marionette.Application();

已编译的Javascript代码

// file : SampleModule.js (transpiled code)
define("SampleModule", ["require", "exports", "marionette"], 
function(require, exports, marionette) {
    "use strict";
    return new marionette.Application();
});

那就是它 - 如果我们用JS编写的话它看起来和写的一样

如何使用打字稿编写marionettejs模块？

2 个答案: