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

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

Использовать новое определение класса из 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;
});

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

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

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

Спасибо.


person rdarioduarte    schedule 05.02.2015    source источник


Ответы (2)


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

  1. Создайте папку amd в корне проекта.
  2. Скопируйте исходную виртуальную машину Durandal (из вашего примера) как есть.
  3. Создайте виртуальную машину-оболочку внутри 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. Это только начало, и есть определенные вещи, на которые стоит обратить внимание, например, уважение жизненного цикла Дюрандаля и т. Д., Но я думаю, это хорошее начало.

person zewa666    schedule 04.03.2015
comment
Привет @ zewa666 Если это сработает, это действительно отличный обходной путь для работы со starndard amd на aurelia, это хорошее преобразование и без особых усилий, рад слышать, что проект становится все больше и больше. С нетерпением ждем релизной версии Aurelia. - person rdarioduarte; 05.03.2015
comment
Я создал репозиторий github.com/zewa666/durelia, который должен помочь вам с первыми шагами. Посмотрим, как далеко мы сможем зайти на этом - person zewa666; 06.03.2015

Вот пример модуля AMD, который работает с 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

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 + "!");
  }
}

вы можете следить за инструкции к образцу в репозитории GitHub для работы с образцом.

person Mike Graham    schedule 08.02.2015
comment
Спасибо @MikeGraham, кажется хорошим решением, но его немного сложно преобразовать, поскольку я видел, что в документации объясняется, что Aurelia работает с обычными модулями AMD из коробки. Но, по крайней мере, это возможный способ сделать это. Большое спасибо за ваш вклад. Отличный фреймворк - person rdarioduarte; 05.03.2015