toastr和ember.js

Question

由于ember不喜欢的直接dom操作,弹出库是不是与Ember一起工作的？有没有像这样的其他库可以很好地与ember一起使用？

编辑

即使通过下面发布的工作示例,我也无法在本地工作.我终于使用了Pine Notify,它可以直接使用.

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/

我建议你阅读关于{{action}}助手的Ember指南