Using Amd Module As An Aurelia Viewmodel

I was playing with Aurelia and seems pretty nice, I use Durandal for some projects and this definitively suit my needs. Use the new class definition from EC6 is awesome. But now I'

Solution 1:

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. 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:

   exportclassTestModule {
     constructor() {
     }
   
     activate() {
       returnSystem.import('../amd/testmodule').then( (result) => {
         if(typeof result === 'function')
           Object.assign(this, newresult());
         elseObject.assign(this, result);
       });
     }
   }
   

4. Enjoy :)

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

Solution 2:

Here is an example AMD module that works with Aurelia:

define(["require", "exports"], function (require, exports) {
  varWelcome = (function () {
    functionWelcome() {
      this.heading = "Welcome to the Aurelia Navigation App (VS/TS)!";
      this.firstName = "John";
      this.lastName = "Doe";
    }
    Object.defineProperty(Welcome.prototype, "fullName", {
      get: function () {
        returnthis.firstName + " " + this.lastName;
      },
      enumerable: true,
      configurable: true
    });
    Welcome.prototype.welcome = function () {
      alert("Welcome, " + this.fullName + "!");
    };
    returnWelcome;
  })();
  exports.Welcome = Welcome;
});

it was actually generated by a TypeScript source file

exportclassWelcome {
  publicheading: string;
  publicfirstName: string;
  publiclastName: string;

  constructor() {
    this.heading = "Welcome to the Aurelia Navigation App (VS/TS)!";
    this.firstName = "John";
    this.lastName = "Doe";
  }

  getfullName() {
    returnthis.firstName + " " + this.lastName;
  }

  welcome() {
    alert("Welcome, " + this.fullName + "!");
  }
}

you can follow the sample's instructions in the GitHub repository to work with the sample.