在Typescript类中使用dojo/text!

um6iljoc  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(145)

我看过一些例子暗示这是可能的,但是我一直没有成功,我用的是Typescript 2.7.2,我们的项目有很多用JavaScript写的dijit._Widget和dijit._TemplatedMixin的扩展,我们在逐渐转向Typescript,我创建了一个接口扩展了这两个类(和其他),并使用AMD类定义语法在用Typescript编写的类中扩展该接口。我正在声明该类的扩展,并尝试使用dojo/text!在扩展中加载html模板。这是表格d.ts:

/// <reference path="../../../../../../../node_modules/dojo-typings/dojo/1.11/dojo.d.ts" />
/// <reference path="../../../../../../../node_modules/dojo- typings/dijit/1.11/dijit.d.ts" />
/// <reference path="../../../../../../../node_modules/@types/dom.generated.d.ts" />

declare namespace com {
  namespace foo {
    namespace bar {
      namespace web {
        namespace components {
          namespace form {
            interface ModelObjectMainFormView extends dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin, dojo.Evented {
              on(type: string | dojo.ExtensionEvent, func: dojo.EventListener | Function): dojo.WatchHandle;
              emit(type: string | dojo.ExtensionEvent, ...events: any[]): boolean;
            }

            interface ModelObjectFormViewConstructor {
              new (args: Array<any>);
            }

          }
        }
      }
    }
  }
}

这是模块。d.ts:

/// <reference path="index.d.ts" />

declare module 'com/foo/bar/web/components/form/ModelObjectMainFormView' {
  type ModelObjectMainFormView = com.foo.bar.web.components.form.ModelObjectMainFormView;
  const ModelObjectMainFormView: com.foo.bar.web.components.form.ModelObjectFormViewConstructor;
  export = ModelObjectMainFormView;
}

declare module "dojo/text!*" {
  var _: string;
  export default _;
}

这是AMD的扩展声明:

import declare = require("dojo/_base/declare");
import ModelObjectMainFormView = require("com/foo/bar/web/components/form/ModelObjectMainFormView");

class TSModelObjectMainFormView {
  inherited: (args: Object) => any;
}

var exp = declare("com.foo.bar.web.components.form.TSModelObjectMainFormView", [ModelObjectMainFormView], new TSModelObjectMainFormView());
export = exp;

这是尝试使用dojo/text!的扩展:

/// <amd-dependency path="dojo/text!com/foo/bar/web/workItems/configuration/forms/templates/ConfigurationWorkItemMainFormView.html" name="template" />
import * as aspect from 'dojo/aspect';
import * as domAttr from 'dojo/dom-attr';
import * as domClass from 'dojo/dom-class';
import * as domConstruct from 'dojo/dom-construct';
import * as lang from 'dojo/_base/lang';
import ModernizationUtil = require('com/foo/bar/rtc/web/util/ModernizationUtil');
import MimeTypes = require('com/foo/bar/web/scm/MimeTypes');
import * as TSModelObjectMainFormView from '../../../components/form/TSModelObjectMainFormView';
// import * as template from "dojo/text!com/foo/bar/web/workItems/configuration/forms/templates/ConfigurationWorkItemMainFormView.html";
let template: string;

export class ConfigurationWorkItemMainFormView extends TSModelObjectMainFormView {
  templateString = template;

  constructor(args?: any) {
    super(args);
  }
}

我使用ams-dependency是因为dojo/text!的导入在运行时尝试获取模块时失败。它找不到它。dojo代码基于资源的url生成一些唯一的id,其中dojo/text!是前缀,然后是数字,然后是!,然后是url的其余部分。它在模块集合中查找,希望在执行导入的代码行中找到它。这个方法失败了。找不到报告模块。使用ams-dependency,template实际上在源代码中被定义为字符串,并且它包含了在调用类构造函数时由dojo/text!加载的HTML。构造函数中的()必须是第一行代码,并且超级构造函数依赖于已经建立的templateString。当然,示例变量templateString直到构造函数返回后才被赋值为template。2我非常感谢你的帮助。3如果我能提供更多的信息,请告诉我。4感谢所有人。

33qvvth1

33qvvth11#

我通过进行以下更改来使其工作:对于AMD的扩展声明:

class TSModelObjectMainFormView {
  templateString: string;
  inherited: (args: Object) => any;

  constructor(args?: any) {
    if (args && args.templateString) {
      this.templateString = args.templateString;
      this.inherited(arguments);
    }
  }
}

以及扩展TSModelObjectMainFormView的类型脚本类:

constructor(args: any) {
  super(lang.mixin(args, {templateString: template}));
}

我确信有更好的方法。我很乐意得到一些建议。这仍然是使用amd依赖项,据我所知,它已经被弃用了。

相关问题