Here be dragons. This is a work-in-progress helper library for
mologie:autoform-selectize. It appears to work just fine, but has
not been extensively tested. Some selectize.js features are currently
unsupported (option groups, placeholders, possibly more).
This package integrates selectize.js controls with Meteor. It provides
a wrapper class, ReactiveSelectizeController which takes care of
synchronizing the select field's options with a data source passed to
the wrapper. Additionally, a small jQuery plugin is provided. The
jQuery plugin will register itself with Blaze and automatically stop
its live queries when the template is destroyed.
ReactiveSelectizeController wraps selectize.js's API and takes care
of synchronizing your data source with the selectize control. The class
expects its settings as only argument. The control is not relevant when
constructing an instance of the class. Call the class's attach
function and pass it a jQuery instance of the target select control once
ready. Call the class's stop function without arguments when done to
terminate live queries and reactive computations.
The class's settings are mostly indicical to that of selectize.js (and it will in fact pass through any unknown options). Head over to the selectize.js repository and make yourself familiar with its examples and usage document first.
This package introduces the following extensions to selectize.js's settings:
| ReactiveSelectizeController extensions | |||
|---|---|---|---|
| Option | Description | Type | Default |
options |
Required. A function returning either an array of options, or a Mongo.Cursor. The function is re-evaluated automatically using Tracker when its reactive data sources change. |
function |
undefined |
placeholder |
Optional. A placeholder option with empty value will be added as first element of the options collection. It can be used with selectize.js's allowEmptyOption setting. |
object |
undefined |
selected |
Optional. An array of strings containing the identifying values of options to be marked as selected. Should this array contain values which are not present in the initial result of options, and if create is set, the options will be added as if the user created them. Your custom create callback, if any, will be invoked for each unknown option. The order of the array is kept. |
[String] |
undefined |
remotePersist |
Optional and only relevant if create is set. When an option disappears from the result of options, this setting will used for determining the appropriate reaction.always: All options should be kept in the select field's dropdown list until it is destroyed. Requires persist to work like you want it to.selected: Delete the option only if it is not selected. If it is selected, the option will be marked as user-created and fall under the control of the persist setting.never: Deselect options prior to deleting them and make your users wonder what is going on.
|
String |
"selected" |
| jQuery plugin extensions | |||
| Option | Description | Type | Default |
automaticTeardown |
The jQuery plugin will attach itself to destroyed-event of the Blaze view which contains the target select controls. If you are using this library outside of Meteor's templating system, this behavior may break things and can be disabled using this option. | Boolean |
true |
Assuming you have a collection of posts, accessible through Posts,
and wish to display a select field which uses the post's database
identifier as value and the post title as label:
<body>
<select id="postSelect"></select>
</body>Template.body.rendered = ->
@postSelect = @$('#postSelect').reactiveSelectize(
options: -> Posts.find()
valueField: '_id'
labelField: 'title'
)[0].reactiveSelectize
Template.body.events
'change #postSelect': -> (event, tpl)
postId = tpl.postSelect.getValue()
# Use the post IDThis project is licensed under the MIT license.