Using humane.js with aurelia

Question

Using humane.js with aurelia

707 views Asked by Matt McCabe At 24 November 2024 at 21:59

I'm trying to use humane.js with aurelia however I'm running in a problem.

It appears humane.js adds an element to the DOM when it's created and so far the only way I've found to do it is to force it like this....

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

However this creates a new instance of humane every time showMessage() is called. This breaks the queue as each one is rendered separately.

I've tried putting the create() in the activate() method of the view model but that doesn't seem to work either.

Any ideas?

Original Q&A

There are 3 answers

Richard Hassler On 14 June 2015 at 01:52

Here is how I am using humane.js with Aurelia:

1) I load the CSS in the app index.html.

2) In each view model that requires humane, I import humane

import humane from 'humane-js/humane';

I do NOT inject human into the view model.

3) I show notifications like this:

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

I hope this helps you.

Roland Quast On 06 November 2015 at 07:42

Unfortunately for Aurelia, Humane will attach itself to the DOM automatically as a child of body, which Aurelia then replaces.

There is a really, really, simple fix for this:

Change your:

<body aurelia-app="main">

To this:

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

This way, Aurelia doesn't replace the div which is in body, you don't need to worry about attached() or where the import appears in your code, and humane works perfectly.

I have raised a humane github issue for this. https://github.com/wavded/humane-js/issues/69

**Matt McCabe** · Accepted Answer · 2015-06-14 08:18:18

This solved the problem, I've created a custom element for humane that is then included in app.html in the same way loading-indicator is in the skeleton app.

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

The important part was the attached() this allows the setup of humane to work correctly.

TechQA.

Using humane.js with aurelia

There are 3 answers

Related Questions in AURELIA

Popular Questions

Popular Tags

Trending Questions