Flexberry Documentation
FlexberryDdauSliderComponent Class
Flexberry slider component with bootstrap-ui-slider through ui-ember-slider and "Data Down Actions UP (DDAU)" pattern one way binding. Component doesn't mutate passed value by its own, it only invokes 'change' action, which signalizes to the route, controller, or another component, that passed value should be mutated.
Usage with manual 'change' action handling: templates/my-form.hbs
{{flexberry-ddau-slider
value=model.value
change=(action "onModelValueChange")
}}
controllers/my-form.js
actions: {
onModelValueChange(e) {
// Set new value to model's 'value' property.
this.set('model.value', e.newValue);
// Log jQuery 'change' event object triggered after checkbox input was clicked.
console.log(e.originalEvent);
}
}
Usage with {{#crossLink "FlexberryDdauSliderActionsHandlerMixin"}}flexberry-ddau-checkbox-actions-handler mixin{{/crossLink}}:
{{flexberry-ddau-slider
value=model.value
change=(action "onSliderChange" "model.value")
}}
controllers/my-form.js
import Controller from '@ember/controller';
import FlexberryDdauSliderActionsHandlerMixin from 'ember-flexberry/mixins/flexberry-ddau-slider-actions-handler';
export default Controller.extend(FlexberryDdauSliderActionsHandlerMixin, {
});
Item Index
Methods
Methods
_actionHandlerIsDefined
-
options
Parameters:
Returns:
_addDynamicProperty
-
propertyName
Parameters:
-
propertyNameStringName of dynamic property that must be added.
_dynamicPropertiesDidChange
()
private
_removeDynamicProperties
()
private
_removeDynamicProperty
-
propertyName
Parameters:
-
propertyNameStringName of dynamic property that must be removed.
actions.change
-
e
Handles inner input's bubbled 'change' action. Invokes component's FlexberryDdauSlider/sendingActions.change:method action.
Parameters:
-
eObjectjQuery event object which describes inner input's 'change' event.
attachEventHandler
-
options
Parameters:
-
optionsObjectMethod options.-
eventTargetObjectDOM-element (jQuery-object) for which event-handler must be attached.
-
eventNameStringEvent name.
-
eventHandlerFunctionEvent handler.
-
closeModalDialog
()
createdModalDialog
-
modalDialog
Parameters:
-
modalDialogJQueryCreated modal window.
detachAllEventHandlers
()
detachEventHandler
-
options
Parameters:
-
optionsObjectMethod options.-
eventTargetObjectDOM-element (jQuery-object) from which event-handler must be detached.
-
eventNameStringEvent name.
-
eventHandlerFunctionEvent handler.
-
send
-
actionName -
args
`
Parameters:
-
actionNameStringName of the action that must be triggered. -
argsArguments that must be passed to action.
Returns:
sendingActions.change
-
e
Component's action invoking when slider was moved and it's 'value' state changed.
Parameters:
-
eObjectAction's event object.
-
newValueBooleanComponent's new value.
-
originalEventObjectjQuery event object which describes inner input's 'change' event.
-
Properties
_availableDomEvents
Object
private
_componentWrapperIsAvailable
Boolean
private
_dynamicActions
Object
private
_dynamicPropertiesMetadata
Object[]
private
Default: null
_eventsMetadata
Object[]
private
Default: null
_openedModalDialog
JQuery
Default: undefined
_requiredActions
String[]
Component's required actions names. For actions enumerated in this array an assertion exceptions will be thrown, if actions handlers are not defined for them.
Default: ['change']
classNames
String[]
Component's wrapping
Any other CSS-classes can be added through component's 'class' property.
{{flexberry-ddau-slider class="toggle" value=model.value change=(action "onModelValueChange")}}
Default: ['flexberry-slider', 'ui']
dynamicActions
DynamicActionObject[]
Default: null
dynamicProperties
Object
Default: null
flexberryClassNames
Object
static
Component's CSS-classes names. JSON-object containing string constants with CSS-classes names related to component's .hbs markup elements.
Sub-properties:
-
prefixStringComponent's CSS-class names prefix ('flexberry-slider').
-
wrapperStringComponent's wrapping
CSS-class name ('flexberry-slider').
BooleanisTaglessFlag: indicates whether component is tagless or not (has empty [tagName](https://emberjs.com/api/ember/release/classes/Component#property_tagName) or not).