How should a Form addon work?


#1

I’m working on a form addon. It works something like this:

{{my-form model=model.post}}
  {{my-input label="Title" property="title"}}
  {{my-select label="Authors" property="author" content=model.authors optionLabelPath="name"}} 
{{/my-form}}

my-input and my-select are inherited from the the control-group class, which bind the value to the form’s model’s property. It monitors the value change and validate the value. (the form’s model have validation rules).

My question is about the buttons: every form should have a submit button, which would be easy to implement. But what if the developer how uses this addon (ex. you) wants to have more buttons? [save, cancel, back without saving]

What is a user friendly way to have this options? Let allow the consumer of the addon to specify the partial whit his/her buttons?

{{my-form model=model.post buttons="-pane"}}

templates/-pane.hbs

{{my-button action="save"}} // <- save is handled in the my-form component
{{my-button action="gotoSomeRoute"}} // <- this is handled in the route so it wont work

It works fine as long the action is handled in the form component. But what if someone wants a button which leads to a specified route? Or some other action which is not handled by the form component. Since the component is isoleted, it wont bubble up. Should then the form component have some kind of tunnel - which delegates the action to he controller, so it can bubble up - for this action, which are handled outside its scope. (ex. in the controller or route)?

Or the form component simple doesn’t need buttons? Its only work is to validate, and let the user change the values of its model.

Any opinion, solution and idea are most welcome!

Edit

After some chat @ #emberjs I came up with the idea to use an array of objects as buttons. Something like this:

  buttons: Ember.A([
    {action: 'cancel', type:'danger', text:'delete2'},
    {action: 'save', text:'save'}
  ])

It will be rendered in the form’s template:

{{#each button in buttons}}
  {{component 'my-button' type=button.type text=button.text action=button.action}}
{{/each}}

And it’s easy enough to overwrite

{{my-form model=model.post buttons=buttons}}

Thoughts?