Forms
Synergy makes working with form data a breeze by automagically binding named form controls to properties of the same name on your model.
Model:
{
color: "#4287f5"
}
Template:
<input :name="color" type="color" />
Select
Attribute a name to your <select>
and the value
of the bound property will reflect that of the
currently selected <option>
Model:
{
pets: "hamster"
}
Template:
<label for="pet-select">Choose a pet:</label>
<select :name="pets" id="pet-select">
<option value="">
--Please choose an option--
</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
The standard HTML <select>
element also supports
the ability to select multiple options, using the
multiple attribute:
<select
:name="pets"
id="pet-select"
multiple
></select>
A <select>
with [multiple]
binds to an Array
on your data:
{
pets: ["hamster", "spider"]
}
Radio Buttons
Add a name to each radio button to indicate which group it belongs to.
<input
type="radio"
:name="filter"
value="all"
id="filter.all"
/>
<input
type="radio"
:name="filter"
value="active"
id="filter.active"
/>
<input
type="radio"
:name="filter"
value="complete"
id="filter.complete"
/>
As with <select>
, the value of the named
property will reflect the value of the selected
<input type="radio">
.
{
filter: "active"
}