In anticipation of the switch to using components everywhere in Ember 2.0, I am trying to architect my app to use components all the way down in the view layer.
I have a route which essentially contains a form which is organized in a tab view where each tab has a collection of fields. So I have a parent form component which contains a tabs component and then on each tab there are multiple field components.
Each field is passed an initial value in its attributes. When the user edits the value in a field, the new value is passed back up the stack via an action. The field component also maintains some internal state about whether it has been edited so that some different styling is applied to edited fields.
My difficulty now is with the implementation for a Reset button on the form which will cause all the changes to be thrown away and the fields all to be reset to their ‘unedited’ state. One approach would be push the maintenance of the state of all the fields up the tree to the form so that it then gets communicated back down to all the fields via attributes on the components. In this way the Reset action will change the ‘edited’ state of all the fields it maintains and the field components would respond via the changes to the attribute values.
But it seems to me that the individual field components should be responsible for maintaining their own state and this should not be a concern of the parent form which only needs to keep track of the updated values as its actions are triggered by the fields.
But how else can the parent form communicate down to its child components? Some sort of global event bus, perhaps using Ember.Evented?
Any ideas about the ‘correct’ way to design this would be much appreciated Thanks