Ответ 1
Поскольку у вас есть анимации, которые вы хотите запустить при изменении уведомлений, вам нужно создать подкласс Ember.View
( "виджет" ):
App.NotificationView = Ember.View.extend({
notificationDidChange: function() {
if (this.get('notification') !== null) {
this.$().slideDown();
}
}.observes('notification'),
close: function() {
this.$().slideUp().then(function() {
self.set('notification', null);
});
},
template: Ember.Handlebars.compile(
"<button {{action 'close' target='view'}}>Close</button>" +
"{{view.notification}}"
)
});
Этот виджет будет иметь свойство notification
. Вы можете установить его из своего шаблона application
:
{{view App.NotificationView id="notifications" notificationBinding="notification"}}
Это получит свое свойство notification
из ApplicationController
, поэтому мы создадим пару методов на контроллере, которые другие контроллеры могут использовать для отправки уведомлений:
App.ApplicationController = Ember.Controller.extend({
closeNotification: function() {
this.set('notification', null);
},
notify: function(notification) {
this.set('notification', notification);
}
});
Теперь предположим, что мы хотим создавать уведомление каждый раз, когда вводим маршрут dashboard
:
App.DashboardRoute = Ember.Route.extend({
setupController: function() {
var notification = "You have entered the dashboard";
this.controllerFor('application').notify(notification);
}
});
Само представление управляет DOM, а контроллер приложения управляет свойством notification
. Вы можете увидеть, как все это работает в этом JSBin.
Обратите внимание, что если все, что вы хотели сделать, это показать уведомление и не волнует анимацию, вы могли бы просто сделать:
{{#if notification}}
<div id="notification">
<button {{action "closeNotification"}}>Close</button>
<p id="notification">{{notification}}</p>
</div>
{{/if}}
в вашем шаблоне application
с тем же ApplicationController
, и все будет работать.