2016-09-20 85 views
2

我的問題是關於在Maquette Javascript框架中組件之間的通信。Maquette中組件之間的通信

想象我有一個Application組件使用的Menu子組件:所述Application實例想知道當在Menu實例被選擇以便交換在應用程序顯示(例如)在主內容的菜單項。換句話說,我需要一種在子組件和其父組件之間進行通信的方式。這怎麼能在Maquette中實現?

當然,我可以將應用程序實例擁有的回調傳遞給菜單實例,該菜單實例將在選擇某個項目時調用。但我有點不情願這樣做,因爲「選擇」事件只是菜單組件的「渲染方面」,所以我寧願事件不要泄漏到我的API中,而是留在渲染器中函數/方法。

所以,我想在「渲染端」處理事件。但我想這意味着我必須從Menu的渲染函數發送一個CustomEvent,並在Application的渲染函數中註冊一個CustomEvent處理程序,對吧? maquette支持這種用例嗎? CustomEvent有其他替代方案嗎?

謝謝!

PS:爲了獲得更多答案,請在的門票處轉讓此處的問題。

回答

1

我們通常所做的就是將回調傳遞給在單擊項目時被調用的組件。例如,菜單可以用回調menuItemClicked(menuItem: MenuItem)來構建。 Imho不會將任何特定於應用程序的知識泄漏到菜單/菜單項中。菜單的創建者可以在回調內執行任何操作,如路由或更改變量。

事件系統當然也是可能的。我不推薦使用DOM層次來冒泡事件。我可以想象Application使用menu = createMenu(...)創建菜單,然後調用menu.addEventListener('itemClicked', navigate)什麼的。

+0

爲什麼不推薦使用DOM層次結構?由於性能問題? –

+0

我認爲使用DOM層次結構會使事情變得不必要的複雜。但我很好奇,如果事實確實如此。也許你可以製作一個jsfiddle或codepen來演示你如何完成這個任務? –

+0

我意識到我可能還需要一個事件才能被觸發,如果當前選定的項目在編程上被改變爲click事件處理程序之外......所以它不能僅僅是一個渲染方面的事件。我終於認爲你的答案是要走的路。 –