Question

我目前有一个具有以下应用程序和视图的应用程序。我希望能够在我的应用程序的各个点上闪现这些通知。我目前的emberscripts文件包括

class Candidate.ApplicationController extends Ember.ArrayController
    alerts: Ember.Object.create
        success: [
            'TaDa!'
            'Here we go!'
        ]
        error: [
            'What did you do now!?'
        ]

Candidate.AlertsView = Ember.View.extend
    templateName: 'views/alerts'

Candidate.AlertView = Ember.View.extend
    templateName: 'views/alert'

    class: (->
        return 'alert alert-' + @type
    ).property()

    close: ->
        @$().slideUp 'normal', =>
            @destroy()

我view/alerts的把手看起来像这样：

{{#each alerts.success}}
    {{view Candidate.AlertView messageBinding=this type="success"}}
{{/each}}

views/alert：

<div {{bindAttr class="view.class" }}>
    <i class="icon-remove-sign"></i>
    <button type="button" class="close" {{action 'close' target='view'}}>×</button>
    {{view.message}}
</div>

现在这适用于初始值，但有一些问题。

它不允许我添加新的提醒
关闭功能不会从应用程序控制器上的警报对象中删除警报

我如何才能将此更接近会话闪存提醒消息包，就像服务器上可用的内容一样？

这是当前代码的JSBin：http://jsbin.com/ejAS/1/

Answer 1

您可以使用余烬组件http://jsbin.com/AQuQILI/8/edit?html,js,output查看此示例我希望这可以帮到你

Answer 2

查看Bootstrap for Ember有关更完整的通知组件。

它支持自动淡入/淡出消息，将鼠标悬停在通知上会导致它不淡出，因此用户可以有更多时间阅读它，显示时间/淡入/淡出时间可以配置等等...

<强>演示：

http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/notifications

Answer 3

在做了更多关于传递数据和更多地了解控制器的研究之后，我想我实际上已经采用了这种方法。

http://jsbin.com/uhel/6/edit?html,js

虽然我真的喜欢淡入淡出，但这似乎可以很好地完成工作。

Answer 4

我同意@Fab。警报应由组件而不是视图或控制器构建，当然不应由Bootstrap.js构建。这意味着我们将拥有更大的Ember世界控制力＃34;小部件。

此处回答了另一个组件示例：How can I make an Alert Notifications component using Ember.js?

Ember应用程序警报

4 个答案: