This blog article will illustrate how to to use ember semantic ui radio buttons to render form elements selectively and in the process will learn, how to make use of the powerful binding features offered by ember semantic ui for radio buttons via the
So what do we have to begin with ?
The sample form which we want to create
What we want is that the radio button should allow us to make a choice and then display the curresponding fields. Now that seems a trivial process, but there is some thought process which goes into this, to end up with the most efficient choice. We will also discuss some of the obvious things that may come to mind to complete this task. So first let’s make the basic form where in all the fields are visible.
Now let’s learn how to make use of the
mut action on the radio buttons.
What it allows us to do is pass a parameter while calling it, and that parameter name is shared by all the radio buttons belonging to a particular group of radio buttons.
And what that action does is, store the name of the currently selected radio button in it. So we can easily keep track of which button has been selected and use that variable in selective rendering of templates.
The action is triggered whenever the radio button’s property changes and the trigger is aptly called
So essentially the syntax boils down to this :
Now whichever button is selected it’s name will be stored in
selectedMode in this case.
And hence we can use the conditional helpers of handle bars to render elements based on the selected radio button.
The final code looks something like this:
The action is triggered by the
onChange action, hence the variable doesn’t have the value when the template is rendered for the very first time and hence at that instant, none of the fields will be rendered, to avoid that we have used both
unless condition helpers instead of identical conditional helpers to cleverly avoid this situation. You can read about the ember semantic ui radio buttons further more through the official documentation