toastr and ember.js

Question

弹出窗口库toastr是否无法与Ember一起工作，因为它进行了直接的DOM操作，而Ember不喜欢这样做？ 还有其他像这样与Ember良好配合的库吗？

编辑

即使通过下面发布的工作示例，我也无法在本地使其工作。最终我使用了Pine Notify，它立即就能正常工作。

- Rudi

Answer 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/

我建议你阅读Ember指南中关于{{action}}辅助程序的内容。

- MilkyWayJoe

---

谢谢！很好知道它应该可以工作，我会在这边进一步调试为什么它没有出现！ - Rudi

我可以看到在调试时 toastr 被调用。我甚至可以进入 toastr 并看到它正在运行。当我在 toastr.js 中将 debug 设置为 true 时，我会在控制台中得到一个显示我的设置的对象，但我就是看不到它弹出。无论从哪个模板/控制器中调用它... - Rudi

在 toastr.js 中将超时设置为 0 以使用默认值，然后当您有应该显示的 toastr 时，在开发者控制台中搜索您的 dom，看看 toastr div 是否存在。 - WallMobile