Использование модуля AMD в качестве Aurelia ViewModel

Question

Я играл с Aurelia и выглядел довольно красиво, я использую Durandal для некоторых проектов, и это окончательно соответствует моим потребностям.

Использовать новое определение класса из EC6 является удивительным. Но теперь я готовлюсь что-то, в котором мне нужно использовать классические модули AMD с requireJs, что-то вроде этого:

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; 
}); 

После документации Аурелия, я обнаружил, что можно использовать что-то вроде testModule как ViewModel , фактически, viewModel использовался в приложении Durandal.

Но после некоторых попыток я не смог получить эту работу.

Любые мысли или подходы, которые кто-то следил за этим? И самое главное, это возможно? Я думаю, что это просто подтверждение того, что они совместимы.

Спасибо.

Answer 1

Мы немного экспериментировали с этим. Вот что мы придумали. Работа основана на приложении Skeleton Navigation:

1. Создайте папку amd в проекте root.
2. Скопируйте оригинальную Durandal VM (из вашего примера), как есть в ней.

3. Создание Wrapper VM внутри src имени также testmodule.js с этим содержимым:

   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); 
       }); 
       } 
   } 
   

4. Наслаждайтесь :)

Что это делает в основном обернуть исходный DurandalVM и выставить его в качестве нового AureliaVM. Его просто стартер, и есть определенные вещи, которые нужно учитывать в отношении Durandals LifeCycle и т. Д., Но это хорошее начало. Думаю,

Answer 2

Вот example AMD module, который работает с Aurelia:

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

это было на самом деле порождается TypeScript source file

export class Welcome { 
    public heading: string; 
    public firstName: string; 
    public lastName: string; 

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

    get fullName() { 
    return this.firstName + " " + this.lastName; 
    } 

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

вы можете следить за the sample's instructions в репозитории GitHub для работы с образцом.