basecontrol

Abstract definition for all controls defined in juci. Each control inherits and extends/overrides methods and properties from the basecontrol.

  • Extends Observable

    • Listeners to events can be attached by using Observable#bind, or listeners can be bound in the HTML declaration of the control using on+'name of event', for e.g: onafterchange=handleChange(event). Listeners can be removed through Observable#unbind
    All events fired from controls have a property eventObj.control which refers to the control object.

    Attributes

    • data-returner {String} 
      data-returner="returnValue"
      function returnValue(valueFromControl){
	return valueFromControl.replace(" - Added From Control", "");	
}
    • placeholder {String} 
      placeholder="Enter your username"
    • data-formatter {String} 
      data-formatter="formatValue"
      function formatValue(valueFromControl){
	return valueFromControl + " - Added From Control";	
}
    • data-value {Object|Boolean|Number|String}
      Default value for the control
    • data-modifier {String} 
      data-modifier="modifyValue"
      function modifyValue(valueFromControl){
	return valueFromControl.replace(" - Added From Control", "");	
}
    • data-label {String} 
      data-label="Username"
    • disabled {Boolean}
      A boolean value that indicates if the control must be disabled. Read disabled for more information.
    • data-juci {String}
      A string with value as name of the control
    • data-bind {Object} 
      data-bind="ref: someKey, optionsList: list"
      • ref {Expression|Function|String} 
        data-bind="ref: returnValue(anotherKey())"
        function returnValue(val){ return val.replace(/ /g, ""); }
      • disabled {Expression|Function|String} 
        data-bind="disabled: returnValue(anotherKey())"
        function returnValue(val){ return val * 100 / 2000 > 5; }
      • enabled {Expression|Function|String} 
        data-bind="enabled: returnValue(anotherKey())"
        function returnValue(val){ return val * 100 / 2000 > 5; }
      • show {Expression|Function|String} 
        data-bind="show: returnValue(anotherKey())"
        function returnValue(val){ return val * 100 / 2000 > 5; }

    Properties

    • The element which contains the control.

    Methods

    • disable()
      Disables the control. User will not be able to edit the value of the control and click or touch events are not fired on the control.
    • enable()
      Enables the control that was disabled by a call to basecontrol#disable method or by the basecontrol#disabled attribute.
    • focus()
      Gets the focus to the control. Page is scrolled if required to get the control to view port.
    • hide()
      Hides the control from the user interface.
    • onAfterChange(handler, context)
      Registers a handler function to call when the basecontrol#event:afterchange event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the basecontrol#event:afterchange event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onBeforeChange(handler, context)
      Registers a handler function to call when the basecontrol#event:beforechange event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the basecontrol#event:afterchange event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • show()
      Shows the control which was hidden using a call to basecontrol#hide method.
    • triggerAfterChange(val)
      Triggers the dataset to be modified after control.value() has been called to set value on the control.
      Parameters:
      • val
      This has to be called mandatorily to update any dataset that is bound with the control.
    • value(value)
      Sets or gets the value of the control.
      Parameters:
      • value{Object|Boolean|Number|String}
        Value to be set on the control. You must ignore this parameter, if you intend to get the current value of the control.
      Returns:
      {Object|Boolean|Number|String} value of the control, if the value parameter is undefined.

    Events

    • afterchange(eventObj)
      Fires when the user changes the value of the control and the new value if updated on the control.
      Parameters:
      • eventObj{EventObject}
        {EventObject} An event object that is passed to the registered event handler functions. It has the following properties,
        • value{Object|Boolean|Number|String}
          {Object|Boolean|Number|String} The updated value of the control.
        • control{basecontrol}
          The control object on which the event is fired.
    • beforechange(eventObj) Cancellable
      Fires when the user changes the value of the control and the new value yet to update on the control. This event is the perfect place to do any validations on the new value and take appropriate action.
      Parameters:
      • eventObj{EventObject}
        An event object that is passed to the registered event handler functions. It has the following properties,
        • newValue{Object|Boolean|Number|String}
          {Object|Boolean|Number|String} The new value of the control changed by the user.
        • control{basecontrol}
          The control object on which the event is fired.
        • oldValue{Object|Boolean|Number|String}
          The current value of the control.