将AMD模块用作Aurelia ViewModel [英] Using AMD module as an Aurelia ViewModel

问题描述

我正在和Aurelia一起玩，看起来还不错，我在某些项目中使用了Durandal，这绝对满足了我的需求.

I was playing with Aurelia and seems pretty nice, I use Durandal for some projects and this definitively suit my needs.

使用来自EC6的新类定义太棒了.但是，现在我正在准备一些需要将经典AMD模块与requireJs配合使用的东西，如下所示:

Use the new class definition from EC6 is awesome. But now I'm preparing something in which I need to use a classic AMD modules with requireJs, something like this one:

define("testModule",
[],
function() {
    "use strict";
    console.log('testModule loaded');

    var testModule = function() {
        var that = this;

        this.variable = 10;

        that.getVariable = function(){
            alert('function executed ' + that.variable);
        };
    }

    return testModule;
});

根据Aurelia的文档，我发现可以将testModule之类的东西用作ViewModel，实际上在Durandal应用程序中使用过viewModel.

Following the Aurelia's documentation I found that is possible to use something like the testModule as a ViewModel, in fact that viewModel was used in a Durandal application.

但是经过一些尝试，我无法使它正常工作.

But after some attempts I was unable to get this working.

有人遵循此想法或方法吗? 最重要的是，有可能吗?我认为这只是为了确认是否兼容.

Any thoughts or approaches that someone has followed to do that? And most important, it is possible? I think it is but just to confirm that are compatible.

谢谢.

推荐答案

我们已经对此进行了一些试验.这是我们想出的.该作品基于Skeleton Navigation App:

We've been experimenting a bit with that. Here is what we came up with. The work is based on the Skeleton Navigation App:

1. 在项目根目录中创建一个文件夹amd.
2. 按原样将原始Durandal VM(从您的示例中)复制到其中.

3. 在也名为testmodule.js的src中创建包装虚拟机，其内容如下:

1. Create a folder amd in the projects root.
2. Copy your original Durandal VM (from your example) as is into it.

3. Create a Wrapper VM inside src named also testmodule.js with this contents:

export class TestModule {
  constructor() {
  }

  activate() {
    return System.import('../amd/testmodule').then( (result) => {
      if(typeof result === 'function')
        Object.assign(this, new result());
      else
        Object.assign(this, result);
    });
  }
}

享受:)

这实际上是包装原始的DurandalVM并将其公开为新的AureliaVM.它只是一个开始，肯定有一些值得关注的事情，例如尊重Durandals LifeCycle等.但这是一个不错的开始

What this does is essentially wrap your original DurandalVM and expose it as a new AureliaVM. Its just a starter and there are definitely certain things to look into like respecting Durandals LifeCycle etc. but it's a good start I guess

这篇关于将AMD模块用作Aurelia ViewModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！