Ember應用程序警報

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>

現在這適用於初始值，但有一些問題。

1. 它不允許我添加新警報
2. close函數不會從應用程序控制器上的警報對象中刪除警報

我將如何使這更接近會話閃存警報消息包，就像服務器上可用的那樣？

這是當前代碼的JSBin： http ： //jsbin.com/ejAS/1/

Answer 1

您可以使用ember組件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世界控制”。

這里有另一個組件示例： 如何使用Ember.js創建Alert Notifications組件？