Route with multiple form components

Design
1

Hi,

I am trying to follow the guide of Ember 2.0, only using routes, controllers with only attrs hash and components. With that, i am trying to accomplish a way to do the following:

3 Models, Player, Status, PlayerStatus ( Player M:N Status ) : I have the component to create a Player ( form , fields, button action that sends to route ). Similar to model Status, I have another component to create Status ( form , fields , button with action to parent route ).

Now i am stumbled as to do : use the components from Player and Status and create a PlayerStatus.

The problems come down to existing two buttons for each form ( is there a way to remove the buttons and trigger the action on a grant parent button ? ). What is the best way to reuse code, when i want to create a PlayerStatus from an existing Player ( in player page, do a set status ) , or a PlayerStatus from an existing Status ?

Thanks !

1 Like
2

Add the ability to optionally remove the buttons from player and status. Pass in the the player and status models in the playerstatus component then when the button is clicked in player status you can validate the models and save em all at once.

player-status-component.hbs

{{player-component model=player showSave=false}}
{{status-component model=status showSave=false}}
<button {{action "save"}}>Save</button>

If you shuffle more of your logic (think validation, creating, etc) into the router layer you can also avoid putting that logic in both the player, status and playerstatus layers.

3

@varblob thanks.

I was thinking along the same lines. Can i just ask for a clarification on a doubt i have: I can pass model=player to the player-component, and changes that player-component do are saved in the player object. What will happen to this when bindings are one way ( will the changed of the player-component to the player object be readOnly ) ? Also, will this be against “data down , actions up” ( meaning, the model changes of player-component should only “go up” in an action ?). I was asking for a way to “programaticly” trigger the player-component and status-component actions for this ( so i get the new data by actions up ).

I managed alot of ways to do this ( the way you mentioned, but i am scared of ember 2.0 changes ). Also thought on doing kinda of wizard/one at a time/next,next,next ( create player-component with save button/action , then move to status component and save button/action ).

The router layer is validating and saving, the player-component form action only guarantees that data is present before sendAction to router.

4

If the router layer is doing the validation and saving of your models (player, status, and player-status) then you’re doing “data down , actions up” as I understand it. The action up would be the save event containing the data, the data down would be the router saving the model triggering the change in the view layer via one way binding. All the child components are looking at data passed in and not actually changing it EXCEPT through sendAction. The place where it’s violating this is with the input value being a two way binding to the models values.

It seems like there is some debate currently on things like inputs and how they’re handled in data down actions up. I’m fairly certain that default one way binding is just a default and that two way data binding will still be supported and may even have official sanction in select situations like an input. If you wanted to be completely pure you could sendAction on every input change but that seems a bit much.

That’s my take on it, others please pipe in if this sounds off.