Флэш-уведомления Polymer + page.js с тостами
Я создаю приложение среднего размера с помощью Polymer и использую Polymer Starter Kit для запуска, который использует page.js для маршрутизации.
Я хочу реализовать функциональность флеш-сообщений, используя paper-toast
элемент.
В других технологиях / инфраструктурах это реализуется путем проверки того, существует ли свойство при изменении маршрута... если оно существует, оно обнуляет соответствующее сообщение flash / toast.
Как... с Polymer & Page.js возможно повторить этот тип функциональности? У Page.js нет событий для измененных маршрутов.
Я могу думать только о том, чтобы создать прокси-функцию для page('/route')
функция, которую я должен вызывать каждый раз, когда я хочу перейти на новую страницу, которая затем вызывает фактическую page
функция. Есть ли способ лучше?
1 ответ
В настоящее время я реализовал это следующим образом... кажется, все в порядке, но если кто-то может предложить улучшения, дайте мне знать.
В routing.html
window.addEventListener('WebComponentsReady', function() {
// Assign page to another global object
LC.page = page;
// Define all routes through this new object
LC.page('/login', function () {
app.route = 'login';
app.scrollPageToTop();
});
....
//implement remaining routes
// page proxy... to intercept calls
page = function(path) {
// dispatch event
document.dispatchEvent(new Event('LC.pageChange', {path: path}));
// call the real page
LC.page(path);
};
});
Тогда где вы хотите слушать.. в моем случае в lc-paper-toast
элемент добавлен в index.html
файл приложения, который я теперь могу слушать, когда страница меняется...
ready: function() {
document.addEventListener('LC.pageChange', function(e){
console.log('page change' , e);
}, false);
}
Единственное, что нужно знать, это то, что все изменения страницы должны вызываться с page('/route')
иначе он не пройдет через прокси.