HTML Input Element

. However, we have enabled two way data binding on all text inputs. Type into this input, or any of the other text inputs below (the first input below in each panel is a text input) and the bindings will resolve changes.

Lotus Input Element

Here are examples of lotus input components. The x-lotus-input tag extends the Lotus.LotusHTMLElementtag. Our x-lotus-input is also mapped to a Lotus component in the call to context.componentMap.mapComponent('x-lotus-input', Lotus.LotusHTMLElement.prototype, Lotus.Input, xtag);.A new instance of Lotus.Input is attached to each tag instance. Open your console to observe the change in values.

Dynamically Change Skin

If your browser does not natively support web component (Safari) you will not see any change. See the xTag polyfill workaround below.

Changing the appearance of any image control instance is as simple as attaching a different skin using data-template-url="templates/input2.html". Below is the exact same custom set of tags with a different skin attached. All using the same set of selectors encapsulated with Shadow DOM. Imagine how many skins could be created without a single change to the component code.

xTag Pollyfill Workaround

Note: If your browser does not natively support web components you have to attach the new skin using a different tag. In this example we do the following: context.componentMap.mapComponent('x-lotus-image-input2', Lotus.LotusHTMLElement.prototype, Lotus.Input, xtag);. This is an issue with the xTag core and how it encapsulates styles using the tag name.

Mediating Components

The x-lotus-input tag exposes a single change event by default. In order to listen for that event you have to assign an event handler after the document loads. An example is below. However if you are serious about event mediation of we encourage you to check out lotusjs-mvw. This is a full blown MVW framework which comes with a mediator map for your components (and much more). This allows you to build application mediators that are mapped to your custom tags. Mediators can do all sorts of useful things like triggering business logic, dispatching application events to trigger commands, and setting up data binding within your surrounding application.

        var context = (function (xtag) {
            var context = new Lotus.Context(new Lavender.Config);
            context.componentMap.mapComponent('x-lotus-input', Lotus.LotusHTMLElement.prototype, Lotus.Input, xtag);
            context.componentMap.mapComponent('x-lotus-input2', Lotus.LotusHTMLElement.prototype, Lotus.Input, xtag);
            return context;
        //start binding source set up. This is a crude example. Most application should use a MVW framework like lotusjs-mwv set create data models and apply bindings using mediators.
        //below we create a source for data binding. Components should always effect an application model instead of acting on the view directly
        //you can then use two way data bindings on the model to keep your components in sync with model. Changes in the model are then resolved by the component.
        var BindingSource = function(){
            var _value;
                value: {
                    get: function () {
                        return _value;
                    set: function (val) {
                        _value = val;
                        document.getElementById('bindingInput').value = val;
                        this.notify(val, "value");

            BindingSource.prototype.onInputChange = function(event){
                //while the Lotus binder automatically prevents recurssion for accessors, functions need a manual check
                if(this.value !={
                    this.value =;
        //Lavender.ObjectUtils has some handy utility methods including extend which enbales prototypal inheritance between objects
        //Lavender.Subject exposes several useful methods including addProperties and notify which is part of an implmentation of the observable pattern
        Lavender.ObjectUtils.extend(Lavender.Subject, BindingSource);
        //end binding source set up
        //create an instance of our source
        var bindingSource = new BindingSource();
        //the following is an example of how you can mediate the component events that are dispatched.
        //A better alternative is to use and take advantage of component mediators
        window.onload = function () {

            var list = document.getElementsByTagName('x-lotus-input');
            //add event listener to capture changes in our sample input box
            document.getElementById('bindingInput').addEventListener('change', bindingSource.onInputChange.bind(bindingSource))
            var handler = {
                onChange: function (event) {
                    console.log('My callback function received value: ' +;
                    //the lotus syntax for addEventListener is slightly different than that of DOM elements,
                    //but it ensures the scope of this within a callback is always relative the the second parameter which is the object instance
                    component.addEventListener(Lotus.InputEvent.CHANGE, handler, 'onChange');
                    //set up two way binding for text inputs
                    if(component.type == 'text'){
                        //set up a two way boindiong between the lists selected item and our binding source. This ensures all the lists stay in sync with the selected image
                        bindingSource.binder.bind(component, 'value', bindingSource, 'value');
                        bindingSource.binder.bind(bindingSource, 'value', component, 'value');
                addEventListeners:function (component) {
                    //Do not set up data providers until the component is ready!
                    //if you use lotusjs-mvw you can take advantage of component mediators that have built in onReady callbacks
                        component.addEventListener(Lotus.ComponentEvent.READY, handler, 'onReady')
            for (var i = 0; i < list.length; i++) {
            list = document.getElementsByTagName('x-lotus-input2');
            for (var i = 0; i < list.length; i++) {