如何在Aurelia中设置Flash消息？

Question

我想弄清楚怎么用奥雷利亚写闪光灯。我已经创建了一个自定义元素flash-message，并在app.html中要求它，但是消息不会更新。如果我将它设置为默认值，它就会正确显示。

app.html

<template>
  <require from="./resources/elements/flash-message"></require>
  <flash-message></flash-message>
</template>

flash-message.html

<template>
  <div class="alert alert-success">${message}</div>
</template>

flash-message.js

import {bindable, bindingMode} from 'aurelia-framework';

export class FlashMessage {
  @bindable({defaultBindingMode: bindingMode.twoWay}) message = 'Default';

  setMessage(newValue) {
    this.message = newValue;
  }
}

object-detail.js

import {FlashMessage} from './resources/elements/flash-message';

export class ObjectDetail {
  static inject() {return [FlashMessage]};

  constructor(flash) {
    this.flash = flash;
  }

  activate(params, routeConfig) {
    this.flash.setMessage('Activate');
  }
}

正在调用activate()代码以及setMessage()方法，但显示的消息不会更新。我遗漏了什么？

Answer 1

由于最初只需要在app.html中使用模板而不实例化app.js中的类，所以Aurelia将其视为一个自定义元素，这意味着它有自己的实例(而不是单个实例)。您基本上是在处理两个不同的FlashMessage实例，因此其中一个的属性没有反映在另一个实例中。

如果希望将其实例化为单例类，还需要在app.js中导入组件并将其注入构造函数中，以便将其视为组件而不是自定义元素。

app.js

import {FlashMessage} from './resources/elements/flash-message';

@inject(FlashMessage)
export class App {
  constructor(flashMessage) {
    this.flashMessage = flashMessage;
  }
  // ...
}

自定义元素与类/视图模型的混淆

由于所有类属性都被认为是公共的，所以甚至不需要setMessage(newValue)方法。您可以像下面这样从object-detail.js更新消息属性：

this.flash.message = 'Activate';

另外，使用@bindable行的目的是让您可以使用HTML代码中的变量值实例化它，如下所示：

<flash-message message="Show this message"></flash-message>

如果您不打算这样使用它，我将跳过整个@bindable行。您的flash-message.js可以简化为以下内容：

export class FlashMessage {
  constructor() {
    this.message = 'Default';
  }
}

事件聚合器在Flash消息中的应用

我使用Toastr第三方库(仅仅因为我喜欢UI)实现了一个具有类似目标的Flash消息类。但这并不难设置任何方式你想。我认为，允许应用程序的任何部分设置闪存消息的最佳方法是使用Aurelia的事件聚合器。下面的代码片段可能会帮助您设置它。

flash-message.js

import { inject } from 'aurelia-framework'
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class FlashMessage {

  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
    this.eventAggregator.subscribe('ShowFlashMessage', this.showMessage);
  }

  showMessage(message) {
    this.message = message;
    // hide after 10 seconds
    window.setTimeout(hideMessage, 10000);
  }

  hideMessage() {
    this.message = "";
  }
}

这显然是简化的，不处理多条消息，或者在发布第二条消息时更新计时器，但这应该足以让您开始工作。

要从应用程序的另一部分设置消息，只需首先注入eventAggregator并保存在构造函数中，然后发布如下消息：

this.eventAggregator.publish('ShowFlashMessage', "Record saved");

My在Aurelia中的实现：

与您所做的类似，我在我的FlashMessage文件夹中的一个名为common的子文件夹中创建了一个名为src的公共类。

//src/common/flash-message.js
import * as toastr from 'toastr';
import { inject } from 'aurelia-framework'
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class FlashMessage {

    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
        this.eventAggregator.subscribe('ewFlashSuccess', this.showSuccess);
        this.eventAggregator.subscribe('ewFlashInfo', this.showInfo);
        this.eventAggregator.subscribe('ewFlashWarning', this.showWarning);
        this.eventAggregator.subscribe('ewFlashError', this.showError);

        // Not sure why this is not working... if you figure it out, let me know.
        toastr.options = {
            positionClass: "toast-top-left",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut",
            preventDuplicates: true,
            closeButton: true
        }
    }

    showSuccess(message) {
        toastr.success(message, null, {preventDuplicates: true, closeButton: true});
    }

    showInfo(message) {
        toastr.info(message, null, {preventDuplicates: true, closeButton: true});
    }

    showWarning(message) {
        toastr.warning(message, null, {preventDuplicates: true, closeButton: true});
    }

    showError(message) {
        toastr.error(message, null, {preventDuplicates: true, closeButton: true});
    }

}

然后，我在app.js中注入并实例化它，如下所示：

import { inject } from 'aurelia-framework';
import { FlashMessage } from './common/flash-message';
@inject(Core, FlashMessage)
export class App {
  constructor(core, flashMessage) {
    this.flashMessage = flashMessage;
  }
  // ...
}

我还必须像这样要求app.html中的CSS：

<require from="toastr/build/toastr.min.css"></require>

所有这一切都取决于是否正确安装了Toastr (我用npm install toastr --save安装了它)，并在aurelia.json中正确地要求它作为依赖项(我使用的是CLI)。

                {
                    "name": "toastr",
                    "path": "../node_modules/toastr",
                    "main": "toastr",
                    "resources": [
                        "build/toastr.min.css"
                    ]
                },

最后的想法

还请参阅Ashley的答复，以更好地解释如何获得ViewModel的句柄，以及修复当前问题的工作GistRun。艾希礼比我对奥雷利亚更有经验，所以如果我的部分解决方案不起作用，他很可能会！:-)

Answer 2

我建议使用ViewModel获得自定义元素的view-model.ref="flash"引用。请注意，您将无法从activate回调中使用这一点，尽管在页面生命周期的那个时候不会发生绑定。在下面的示例中，我使用了attached回调。

这里有一个例子： https://gist.run?id=76ef47a5327a34560737f4ade1038305

app.html

<template>
  <require from="./flash-message"></require>
  <flash-message view-model.ref="flash"></flash-message>
</template>

app.js

export class App {
  attached(params, routeConfig) {
    this.flash.setMessage('Activate');
  }
}

flash-message.html

<template>
  <div class="alert alert-success">${message}</div>
</template>

flash-message.js

import {bindable, bindingMode} from 'aurelia-framework';

export class FlashMessage {
  @bindable({defaultBindingMode: bindingMode.twoWay}) message = 'Default';

  setMessage(newValue) {
    this.message = newValue;
  }
}

Answer 3

从LStarky的留言中，我发现了以前我不知道的吐司，所以我只使用了那个库。

npm install toastr --save

aurelia.json (在->依赖项下)

{
  "name": "toastr",
  "path": "../node_modules/toastr",
  "main": "toastr",
  "resources": [
    "build/toastr.min.css"
  ]
}

app.html

<require from="toastr/build/toastr.min.css"></require>

视图-Model.js

import toastr from 'toastr';

action() {
  toastr.success('Toastr visible!');
}