将 humane.js 与 aurelia 一起使用

Question

我正在尝试使用 humane.js with aurelia，但是我运行遇到了问题。

看起来 humane.js 在创建 DOM 时添加了一个元素，到目前为止我发现唯一的方法就是像这样强制它....

showMessage(message) {
    this.notify = humane.create();
    this.notify.log(message);
}

但是，每次调用 showMessage() 时都会创建一个新的人道实例。这会打破队列，因为每个队列都是单独呈现的。

我试过将 create() 放入视图模型的 activate() 方法中，但这似乎也不起作用。

有什么想法吗？

Answer 1

以下是我如何将 humane.js 与 Aurelia 一起使用：

1) 我在应用 index.html.

中加载 CSS

2）在每个需要人性化的视图模型中，我导入人性化

从 'humane-js/humane' 导入人道；

我不会将人注入到视图模型中。

3) 我这样显示通知：

humane.log('错误:, { addnCls: 'humane-libnotify-error' });

希望对您有所帮助。

Answer 2

这解决了问题，我为人性化创建了一个自定义元素，然后将其包含在 app.html 中，就像加载指示器在骨架应用程序中一样。

import humane from 'humane-js';
import 'humane-js/themes/original.css!';
import {inject, noView} from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
import { ApiStatus } from 'resources/messages';

@noView
@inject(EventAggregator)
export class StatusIndicator {

  constructor(ea) {
    this.ea = ea;
    ea.subscribe(ApiStatus, msg => this.showMessage(msg.apistatus));
  }

  attached() {
    this.humane = humane.create();
  }

  showMessage(message) {
    this.humane.log(message);
  }
}

重要的部分是 attached() 这允许人道设置正常工作。

Answer 3

对于 Aurelia 来说不幸的是，Humane 将自动附加到 DOM 作为 body 的 child，然后 Aurelia 将其替换。

有一个非常非常简单的解决方法：

改变你的：

<body aurelia-app="main">

为此：

<body><div aurelia-app="main">

这样，Aurelia 不会替换 body 中的 div，您无需担心 attached() 或导入出现在代码中的位置，并且人性化完美运行。

我为此提出了一个人道的 github 问题。 https://github.com/wavded/humane-js/issues/69

将 humane.js 与 aurelia 一起使用

Using humane.js with aurelia

aurelia