toastr 和 ember.js

Posted 2023-05-08

【中文标题】toastr 和 ember.js

【英文标题】：toastr and 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。