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 Way" 是将其包装在服务中。我们创建了一个非常简单的 "notifications" 服务来包装 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!');
      });
    }
  }
});

EmberJS 和 Toastr？兼容性问题？

EmberJS and Toastr? Compatibility Issues?

ember.js

toastr

正在安装 Toastr

访问 Toastr

使用服务