ember.js - toastr 和 ember.js

Question

由于 ember 不喜欢直接 dom 操作，弹出库toastr 是否无法与 Ember 一起使用？有没有像这个一样的其他库可以很好地与 ember 配合使用？

编辑

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

score 8 · Accepted Answer

这在 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 指南