In order to get a better understanding of what works best in Aurelia i’m trying to implement a simple button-based toolbar using a few different methods.
I’m imagining a basic Rich Text Editor Toolbar, where functionality like “bold”, “italic”, “underline”, “strikethrough” are all individual functions (buttons) in the toolbar, but from the presentational code perspective the difference is really just which icon, tooltip, and (obviously) underlying action is applied.
So far i’ve implemented this 3 different ways in Aurelia
- Single button component with configuration using custom attributes in view (#1 below)
- Single button component with repeater backed by array in view model (#2 below)
- Inherited Button hierarchy using a shared view (#3 below)
#1: Attribute-based configuration in view
#2 View Model / Repeater configuration
#3 Child buttons extend parent button
#3 - feels like the least “Aurelia” way to tackle the problem.
#1 - it is refreshing to have all the view configuration pieces (icons, tooltips, etc) in the view (.html) code.
#2 - nice to have the pure configuration code (only what is different) in a JS object - much more readable.
I feel like I’m missing a custom decorator based option, but having a hard time getting my head around. Any other patterns I should look at?