Question

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

但是，在包含之后，我无法使库正常工作，控制台报告正在执行GET：但是，我相信Ember的独特方式可能会引起我的问题？我找到了另一个问题，引导我进入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

＆＃34; Ember Way＆＃34;与这样的库接口是将它包装在服务中。我们创建了一个非常简单的＆＃34;通知＆＃34;包装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？兼容性问题？

1 个答案:

安装Toastr

访问Toastr

使用服务