In Open Event Frontend, while dealing with an issue, we had to create the ‘contact-info’ route as a subroute of the ‘settings’ route. We have given the user a facility to update his/her information thereby allowing them to change it whenever they want.
Thus to generate the route, we are using ember cli:
ember g route settings/contact-info
Thus, the above command will generate three files:
- routes/settings/contact-info.js
- templates/settings/contact-info.hbs
- tests/unit/routes/settings/contact-info-test.js
1) contact-info.hbs
In this file, we have a form which we have made a component for easy use. Thus following is the content of the contact-info.hbs file:
{{settings/contact-info-section}}
Thus ultimately, we are having a component called ‘contact-info-section’ which contains our markup for the contact-info form.
To generate the component, we do:
ember g component settings/contact-info-section
This command will generate two files:
1. templates/components/contact-info-section.hbs
2. components/contact-info-section.js
Following is the markup in contact-info-section.hbs:
<form class="ui form" {{action 'submit' on='submit'}} novalidate>
<div class="field">
<label>{{t 'Email'}}</label>
{{input type='email' name='email' value=email}}
</div>
<div class="field">
<label>{{t 'Phone'}}</label>
{{input type='text' name='phone' value=phone}}
</div>
<button class="ui teal button" type="submit">{{t 'Save'}}</button>
</form>
In the form, we are having two fields for inputs ‘Email’ and ‘Phone’ respectively. We are using Ember input helpers so as to achieve easy data binding. The name is used as an identifier for the validation.
We have one submit button at the bottom which saves the information that the user wants to update.
The contact-info-section.js file contains all the validation rules which validate the form when the user submits it. If a user enters any field empty, the form prompts the user with a message. Following is an example of the validation rules for the email field:
email: {
identifier : 'email',
rules : [
{
type : 'empty',
prompt : this.l10n.t('Please enter your email ID')
},
{
type : 'email',
prompt : this.l10n.t('Please enter a valid email ID')
}
]
}
Similar rules are there for the ‘phone’ field input.
2) contact-info.js
The contact-info.js renders our route. Thus it contains the ‘titletoken’ method which returns the ‘titletoken’ method which returns the page title.
Thus, after doing all the things above, we get the following as a result.
Resources:
- Ember input helpers
- Semantic UI form validation
- Blog post by Daniel Lavigne about ‘Learning Ember.js Routes’
Source code: https://github.com/fossasia/open-event-frontend