Lead Maintainer: Christopher Dieringer (@cdaringe)
A view module for intelligently rendering and validating selectbox input. Works well with ampersand-form-view.
The upcoming release 4.x is intended to migrate ampersand-select-view
to an extension of ampersand-view
. Due to the refactor, merging changes becomes difficult as the module will exhibit a different structure. As such, all PRs, including bugfixes, should be submitted by April 20, 2015!
this
Alias to calling setValue(null, true)
. Sets the selected option to either the unselectedText option or a user defined option whose value is null
. Be mindful that if no unselectedText or null
option exists, the view will error.
this
Sets the selected option and view value to the original option value provided during construction.
this
Sets the selected option to that which matches the provided value. Updates the view's .value
accordingly. SelectView will error if no matching option exists. null,
undefined, and
''` values will preferentially select unselectedText if defined.
new SelectView([options])
name
: the <select>
's name
attribute's value. Used when reporting to parent formparent
: parent form referenceoptions
: array/collection of options to render into the select box[el]
: element if you want to render the view into[template]
: a custom template to use (see 'template' section, below, for more)[required]
: [default: false
] field required[eagerValidate]
: [default: false
] validate and show messages immediately. Note: field will be validated immediately to provide a true .valid
value, but messages by default are hidden.[unselectedText]
: text to display if unselected[value]
: initial value for the <select>
. value
must be a member of the options
set[label]
: [default: name
value] text to annotate your select control[invalidClass]
: [default: 'select-invalid'
] class to apply to root element if invalid[validClass]
: [default: 'select-valid'
] class to apply to root element if valid[requiredMessage]
: [default: 'Selection required'
] message to display if invalid and requiredIf using a collection to produce <select>
<option>
s, the following may also be specified:
[disabledAttribute]
: boolean model attribute to flag disabling of the option node[idAttribute]
: model attribute to use as the id for the option node. This will be returned by SelectView.prototype.value
[textAttribute]
: model attribute to use as the text of the option node in the select box[yieldModel]
: [default: true
] if options is a collection, yields the full model rather than just its idAttribute
to .value
You may override the default template by providing your own template string to the constructor options hash. Technically, all you must provided is a <select>
element. However, your template may include the following under a single root element:
data-hook="label"
to annotate your select control<select>
element to hold your options
data-hook="message-container"
to contain validation messagesdata-hook="message-text"
nested beneath the data-hook="message-container"
element to show validation messagesHere's the default template for reference:
<label class="select">
<span data-hook="label"></span>
<select></select>
<span data-hook="message-container" class="message message-below message-error">
<p data-hook="message-text"></p>
</span>
</label>
var FormView = require('ampersand-form-view');
var SelectView = require('ampersand-select-view');
module.exports = FormView.extend({
fields: function () {
return [
new SelectView({
label: 'Pick a color!',
// actual field name
name: 'color',
parent: this,
// you can pass simple string options
options: ['blue', 'orange', 'red'],
// if included this will add option for an unselected state
unselectedText: 'please choose one',
// you can specify that they have to pick one
required: true
}),
new SelectView({
name: 'option',
parent: this,
// you can also pass array, first is the value, second is used for the label
// and an optional third value can used to disable the option
options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C', true] ]
}),
new SelectView({
name: 'model',
parent: this,
// you can pass in a collection here too
options: collection,
// and pick an item from the collection as the selected one
value: collection1.at(2),
// here you specify which attribute on the objects in the collection
// to use for the value returned.
idAttribute: 'id',
// you can also specify which model attribute to use as the title
textAttribute: 'title',
// you can also specify a boolean model attribute to render items as disabled
disabledAttribute: 'disabled',
// here you can specify if it should return the selected model from the
// collection, or just the id attribute. defaults `true`
yieldModel: false
})
];
}
});
selectView.value
(the value of your selected options' input) over selectView.select.value
(the value returned from the browser).==
one another. E.g., do not use options whose values are "2" (string) and 2 (number). Browsers cannot distinguish between them in the select control context, thus nor can ampersand-select-view.null
, undefined
, or ''
option values are not considered valid
when the field is required. This does not apply when options are from a collection and yieldModel
is enabled.unselectedText
option will always be preferred in updating the control to an empty-ish value.Due to CI browser testing issues (1, 2), a PR must receive two +1
s from the core-team or maintainer, each with mention that x-browser tests pass in the PR branch (i.e. testem ci
);