Best practice for components

Design
1

Hello all, I’m trying to figure out what the best practice is for creating a form component.

First, I can create a component and put the form element in the template or I can change the tag name for the component to ‘form’. Which one is usually the best way to go?

Second, I see many examples online that add {{action 'some action' on='submit}} on the form element (which is not possible when making the component tagName a form?) versus adding an action on the submit button.

Third, Is it best practice to fully decouple the model from the component even when the form is operating on all the model properties? So I would create separate attributes in my component that matches each property in the model and do the setting of the properties on the model on submit instead of relying on the 2 way binding if I just used the input helper and have the value tied directly to the model properties.

Thanks and appreciate any other tips for best practices involving components.

1 Like
2

  1. This is up to you, but I personally prefer setting tagName: 'form'. I think it more clearly specifies that that component is nothing more than a form, while keeping the html markup clean.

  2. You set event handlers by directly specifying properties on the component. The property key should be the event name, and the value should be the handler function. See Handling Events - Components - Ember Guides for details.

  3. Again this is my opinion, but I think it is always best to decouple the model from the component. In your case, yes, this means you need to duplicate all those properties. Doing it this way could come in handy in the future if you decide to add live updates to your app. Imagine a scenario where a user is trying to use the form to update an existing record when a live update is pushed from the server because someone else edited that same model; in this case, the client may not want to blindly replace all the changes the user has been working on with the new version from the server.

3

Also, I forgot to mention that it’s far better to handle the form submit event than it is to handle the event of the user clicking the submit button. That way you get all the accessibility and usability goodness provided by the browser through using form submission (for example, also submitting the form when the enter key is pressed).

4

Thanks for the tips, especially #2