EmberJS 和 Toastr？兼容性问题？

Question

我有一个 Ember 应用程序，我想在其中包含 Toastr 通知。我想使用该库提供 cookie 警告消息，然后我可以重新设置样式以适应网站主题的其余部分。

但是，包含后，我无法让库正常工作，控制台报告正在执行 GET： 但是，我相信 Ember 的独特工作方式可能会给我带来问题？我发现了另一个 SO 问题，它引导我上了这趟 thought 的火车。

Answer 1

我们在应用程序中使用 Toastr 和 Ember，所以我将详细说明我们是如何做到的：

安装 Toastr

Toastr 通过 Bower 安装，然后通过 ember-cli-build.js 文件包含在构建中

// ember-cli-build.js

...

module.exports = function(defaults) {
  ...
  app.import('bower_components/toastr/toastr.js');
  ...
}

访问 Toastr

与这样的库交互的“Ember 方式”是将其包装在服务中。我们创建了一个非常简单的“通知”服务，它包装了 Toastr 库。这就是全部：

// app/services/notifications.js

/* global toastr */

import Ember from 'ember';

const { Service, on } = Ember;

export default Service.extend({

  initToaster: on('init', function() {
    toastr.options = {
      debug: false,
      positionClass: 'toast-top-right',
      onclick: null,
      fadeIn: 300,
      fadeOut: 1000,
      timeOut: 5000,
      extendedTimeOut: 1000
    };
  }),

  clear() {
    toastr.clear();
  },

  success(message, title) {
    toastr.success(message, title);
  },

  info(message, title) {
    toastr.info(message, title);
  },

  warning(message, title) {
    toastr.warning(message, title);
  },

  error(message, title) {
    toastr.error(message, title);
  }

});

使用服务

现在您可以在任何您想使用 Toastr 的地方注入您的服务。例如，控制器可以这样使用它：

// some controller

import Ember from 'ember';

const { Controller, inject } = Ember;
const { service } = inject;


export default Controller.extend({

  notifications: service(),

  actions: {
    save() {
      this.get('model').save()
      .then(() => {
        this.get('notifications').success('Saved successfully!');
      })
      .catch(() => {
        this.get('notifications').error('There was an error!');
      });
    }
  }
});