toastr和ember.js

问题描述

弹出式图库不会与Ember一起使用，因为直接的dom操纵，ember不不喜欢
有没有像这样的其他图书馆可以很好地使用ember？

Is the popup library toastr not going to work with Ember because of direct dom manipulation that ember doesn't like?Are there any other libraries like this one that work nicely with ember?

甚至通过下面的工作示例，我无法让它在本地工作。我终于使用了，该工具可以直接使用。

Even through the working example posted below I could not get this to work locally. I finally used Pine Notify which worked straight away.

推荐答案

在Ember中可以正常工作，只需在正确的位置处理事件。 正确的地方取决于你的实施。如果您希望从视图中的按钮触发此操作，则需要使用传递动作名称的 {{action}} 帮助器。示例：

This works fine in Ember, you just have to handle the event in the right place. The "right place" depends on your implementation. If you want this to be fired from a button within your view, you'll need to use the {{action}} helper passing the action name. Example:

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

在上面的模板中，我说这个按钮应该触发 showInfo 事件，因此负责此视图的 Controller 应该具有相同名称的功能：

In the template above, I'm saying that the button should fire the showInfo event, so the Controller responsible for this view should have a function with the same name:

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

您还可以将视图处理事件;下面的代码定义了一个点击事件，所以如果您点击视图中的任意位置，它将运行您的功能：

You can also have the view handle the event; the code below defines a click event, so if you click anywhere in the view, it would run your function:

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

在您的Handlebars模板中，您没有做任何事情，因为您已经在您想要处理该视图的单击事件的视图类，因此您可以简单地渲染视图和样式：

and in your Handlebars template, you don't have do tell the action since you are already saying in the view class that you want to handle the click event for that view, so you can simple render the view and style it:

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

以下是JSFiddle中的示例：

Here's a sample in JSFiddle: http://jsfiddle.net/schawaska/YZwDh/

我建议您阅读Ember Guide关于 帮助

I recommend that you read the Ember Guide about the {{action}} helper

这篇关于toastr和ember.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！