toastr 和 ember.js答案

【问题标题】：toastr and ember.jstoastr 和 ember.js
【发布时间】：2013-02-15 05:25:43
【问题描述】：

弹出库toastr 是否因为 ember 不喜欢的直接 dom 操作而无法与 Ember 一起使用？有没有其他类似的库可以很好地与 ember 配合使用？

编辑

即使通过下面发布的工作示例，我也无法使其在本地工作。我终于使用了Pine Notify，它立即生效。

【问题讨论】：

【解决方案1】：

这在 Ember 中运行良好，您只需在正确的位置处理事件。 “正确的地方”取决于您的实施。如果您希望从视图中的按钮触发此操作，则需要使用 {{action}} 助手传递操作名称。示例：

<script type="text/x-handlebars" >
    <button class="btn btn-info" {{action showInfo}}>Info</button>
</script>

在上面的模板中，我是说按钮应该触发showInfo 事件，所以负责这个视图的Controller 应该有一个同名的函数：

App.ApplicationController = Em.ArrayController.extend({
    showInfo: function() {
        toastr.info('This is some sample information');
    }
});

您也可以让视图处理事件；下面的代码定义了一个click 事件，因此如果您单击视图中的任意位置，它将运行您的函数：

App.OtherView = Em.View.extend({
    click: function(e) {
        toastr.error('This is some sample error');
    }
});

在您的 Handlebars 模板中，您不必告诉操作，因为您已经在视图类中说要处理该视图的 click 事件，因此您可以简单地渲染视图和样式它：

{{#view App.OtherView class="btn btn-danger"}}
    Error
{{/view}}

这是 JSFiddle 中的一个示例：http://jsfiddle.net/schawaska/YZwDh/

我建议您阅读有关 {{action}} 助手的 Ember 指南

【讨论】：

谢谢！很高兴知道它应该可以工作，我会在这方面进一步调试它为什么没有出现！
我可以看到在调试时调用了 toastr。我什至可以走进 toastr 并看到它正在做的事情。在 toastr.js 中，我将 debug 设置为 true 时，我在控制台中得到一个显示我的设置的对象，但我只是看不到它弹出。无论是从模板/控制器调用它......
在 toastr.js 内部设置 timeout: 0 为默认值，然后当你有一个应该显示的 toastr 时，在开发者控制台中搜索你的 dom，看看是否有 toastr div。