Examples

It is the goal of this tutorial to show you how to build web applications using AtomicJS. Each page contains a new example.

Hello !

View Adapter

                                            
root.atomic.launch ( "#example1", {worldLabel: {value: "World"}} );
                                            
                                        

View

                                            
<div id="example1">
    <div class="example">
        <div class="well">
            <h1 id="greeting">Hello <span id="worldLabel"></span>!</h1>
        </div>
    </div>
</div>
                                            
                                        

Hello !

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example2",
    {
        greeting2:      {bind: { display: "worldValue.length" }},
        worldLabel2:    {bind: "worldValue"},
        sayHelloButton:
        {
            onclick:    function(){ this.data("worldValue","World"); }, 
            bind:       { display: { when: "worldValue", hasValue: false } }
        }
    }
);
                                            
                                        

View

                                            
<div id="example2">
    <div class="example">
        <div class="well">
            <h1 id="greeting2">Hello <span id="worldLabel2"></span>!</h1>
            <button id="sayHelloButton">Say Hello</button>
        </div>
    </div>
</div>
                                            
                                        

Hello !

Have a great day !

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example3",
    {
        firstNameTextbox:
        {
            focused:    true,
            bind:       { value: { to: "firstName", updateon: ["keydown", "keyup", "change"] } },
            onescape:   function(){ this.value(""); }
        },
        lastNameTextbox:
        {
            bind:       { value: { to: "lastName", updateon: ["keydown", "keyup", "change"] } },
            onescape:   function(){this.value("");}
        },
        helloMessage:
        {
            bind:   { display: function(){return this.data.hasValue("firstName") || this.data.hasValue("lastName");} }
        },
        nameLabels:
        {
            selector:   ".name",
            bind:       function(data){return (this.data("firstName")||"") + (this.data("firstName") && this.data("lastName")?" ":"") + (this.data("lastName")||"");}
        }
    }
);
                                            
                                        

View

                                            
<div id="example3">
    <div class="example">
        <div class="well form-group">
            <div><input id="firstNameTextbox" autocomplete="off" class="form-control" placeholder="Enter your first name:" /></div>
            <div><input id="lastNameTextbox" autocomplete="off" class="form-control" placeholder="Enter your last name:" /></div>
            <div id="helloMessage">
                <p>Hello <span class="name"></span>!</p>
                <p>Pardon me <span class="name"></span>, but do you have any grey poupon?</p>
            </div>
        </div>
    </div>
</div>
                                            
                                        
You've clicked   times
That's too many clicks! Please stop before you wear out your fingers.

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example4",
    {
        numberOfClicks:         { bind: "clickCount" },
        countClickButton:
        {
            onclick:
            function()
            {
                this.data("clickCount", this.data("clickCount")+1);
            },
            bind:       { enabled: { when: "clickCount", "<": 3 } }
        },
        tooManyClicksMessage:
        {
            bind:   { display: { when: "clickCount", ">=": 3 } }
        },
        resetClickCountButton:
        {
            onclick:
            function()
            {
                this.data("clickCount",0);
            }
        }
    },
    function(adapter) { adapter.data("", {clickCount:0}); }
);
                                            
                                        

View

                                            
<div id="example4">
    <div class="example">
        <div class="well form-group">
            <div>You've clicked <span id="numberOfClicks"> </span> times</div>

            <button id="incrementClickCounterButton" class="btn">Click me</button>

            <div id="tooManyClicksMessage">
                That's too many clicks! Please stop before you wear out your fingers.
                <button id="resetClickCounterButton" class="btn">Reset clicks</button>
            </div>
        </div>
    </div>
</div>
                                            
                                        

Your items:

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example5",
    {
        newItem:
        {
            bind:       { value: { to: "newItem", updateon:   ["keydown", "keyup", "change"] } },
            onenter:    function(){this.parent.controls.addNewItemButton.click();}
        },
        addNewItemButton:
        {
            bind:       { enabled: "newItem.length" },
            onclick:
            function()
            {
                if (this.data("newItem.length")>0 && this.data("items").indexOf(this.data("newItem"))==-1)
                this.data("items").push(this.data("newItem"));
                this.data("newItem","");
            }
        },
        itemsList:
        {
            bind: "items"
        }
    },
    function(adapter) { adapter.data("", {newItem:"", items: ["Alpha","Beta","Gamma"]}); }
);
                                            
                                        

View

                                            
<div id="example5">
    <div class="example">
        <div class="well form-group">
            <div>
                <div class="form-group"><input id="newItem" class="form-control" /></div>
                <button id="addNewItemButton" type="button" class="btn">Add</button>
                <p>Your items:</p>
                <div class="form-group">
                    <select id="itemsList" multiple="multiple" class="form-control"> </select>
                </div>
            </div>
        </div>
    </div>
</div>
                                            
                                        

Your items:

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example6",
    {
        betterNewItem:
        {
            bind:       { value: { to: "newItem", updateon: ["keydown", "keyup", "change"] } },
            onenter:    function(){this.parent.controls.betterAddNewItemButton.click();}
        },
        betterAddNewItemButton:
        {
            bind:       { enabled: "newItem.length" },
            onclick:
            function()
            {
                if (this.data("newItem.length")>0 && this.data("items").indexOf(this.data("newItem"))==-1)
                this.data("items").push(this.data("newItem"));
                this.data("newItem","");
            }
        },
        betterItemsList:
        {
            bind: {value: "selected", items: "items"}
        },
        removeItemButton:
        {
            bind:       {enabled: "items.length"},
            onclick:    function(){this.data("items").removeAll(this.parent.controls.betterItemsList.value());}
        },
        sortItemsButton:
        {
            bind:       { enabled: { when: "items.length", ">": 1 } },
            onclick:    function(){this.data("items").sort();}
        }
    },
    function(adapter) { adapter.data("", {newItem:"", items: ["Fries","Eggs Benedict","Ham","Cheese"]}); }
);
                                            
                                        

View

                                            
<div id="example4">
    <div class="example">
        <div class="well form-group">
            <div>
                <div class="form-group"><input id="newItem" class="form-control" /></div>
                <button id="addNewItemButton" type="button" class="btn">Add</button>
                <p>Your items:</p>
                <div class="form-group">
                    <select id="itemsList" multiple="multiple" class="form-control"> </select>
                </div>
            </div>
            <div>
                <button id="removeItemButton" class="btn">Remove</button>
                <button id="sortItemsButton" class="btn">Sort</button>
            </div>
        </div>
    </div>
</div>
                                            
                                        

HTML controls

Text value (updates on change):
Text value (updates on keystroke):
Text value (multi-line):
Password:
Checkbox:
Drop-down list:
Multi-select drop-down list:
Radio buttons:
Buttons:
Readonly:
Link:
Link Panel: [ ]
Images:

What's in the model?

Text value:
Url value:
Password:
Bool value:
Selected option:
Multi-selected options:
Radio button selection:
Image path value:

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example7",
    {
        stringValueReadout:             { bind: "stringValue" },
        urlValueReadout:                { bind: "urlValue" },
        passwordValueReadout:           { bind: "passwordValue" },
        booleanValueReadout:            { bind: "booleanValue" },
        selectedValueReadout:           { bind: "selectedValue" },
        multipleSelectedValuesReadout:  { bind: function(data){ return data("multipleSelectedValues")&&data("multipleSelectedValues").join();} },
        radioSelectedOptionReadout:     { bind: "radioSelectedValue" },
        imagePathValueReadout:          { bind: "imageUrl" },
        onChangeTextboxControl:         { bind: "stringValue" },
        onKeyStrokeTextboxControl:      { bind: { value: { to: "stringValue", updateon: ["keydown","keyup","change"] } } },
        textAreaControl:                { bind: "stringValue" },
        passwordControl:                { bind: "passwordValue" },
        checkboxControl:                { bind: "booleanValue" },
        singleDropdownListControl:      { bind: { value: "selectedValue",           items: "items" } },
        multipleListControl:            { bind: { value: "multipleSelectedValues",  items: "items" } },
        radioGroupControl:              { bind: { value: "radioSelectedValue",      items: "items" } },
        buttonControl:                  { bind: "stringValue" },
        readonlyControl:                { bind: "stringValue" },
        linkControl:                    { bind: {value: "stringValue", href: "urlValue" }},
        urlTextboxControl:              { bind: "urlValue" },
        linkPanelControl:
        {
            bind: {href: "urlValue"},
            controls:
            {
                panelReadonly:  { bind: "stringValue" },
                panelUrl:       { bind: "urlValue" }
            }
        },
        imageControl:                   { bind: "imageUrl" },
        imagePathControl:               { bind: { value: "imageUrl",                items: { to: "images", text: "title", value: "url" } } },
        example7model:                  { bind: { value: { to: function(){return JSON.stringify(this.data(), null, '    ');}, root: "" } } }
    },
    function(adapter)
    {
        adapter.data("", 
        {
            stringValue:            "Hello", 
            urlValue:               "https://atomicstack.com",
            passwordValue:          "mypass", 
            booleanValue:           true, 
            selectedValue:          "Gamma", 
            multipleSelectedValues: ["Beta"], 
            radioSelectedValue:     "Alpha",
            imageUrl:               "images/hammock_cat.jpg",
            items:                  ["Alpha","Beta","Gamma"],
            images:
            [
                {
                    title:  "Hammock Cat",
                    url:    "images/hammock_cat.jpg"
                },
                {
                    title:  "Headphones",
                    url:    "images/headphones.jpg"
                },
                {
                    title:  "Nature Scene",
                    url:    "images/nature_scene.png"
                }
            ]
        });
    }
);
                                            
                                        

View

                                            
<div id="example1">
    <div class="example">
        <div class="well">
            <div class="row">
                <div class="col-md-8">
                    <h3>HTML controls</h3>
                    <table class="table table-bordered">
                        <tr class="table-row">
                            <td class="table-cell">Text value (updates on change):</td>
                            <td class="table-cell"><input id="onChangeTextboxControl" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Text value (updates on keystroke):</td>
                            <td class="table-cell"><input id="onKeyStrokeTextboxControl" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Text value (multi-line):</td>
                            <td class="table-cell"><textarea id="textAreaControl"> </textarea></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Password:</td>
                            <td class="table-cell"><input id="passwordControl" type="password" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Checkbox:</td>
                            <td class="table-cell"><input id="checkboxControl" type="checkbox" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Drop-down list:</td>
                            <td class="table-cell"><select id="singleDropdownListControl"></select></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Multi-select drop-down list:</td>
                            <td class="table-cell"><select id="multipleListControl" multiple="multiple"></select></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Radio buttons:</td>
                            <td class="table-cell">
                                <radiogroup id="radioGroupControl">
                                    <radiogroupitem class="radio-inline">
                                        <input type="radio" /><label></label>
                                    </radiogroupitem>
                                </radiogroup>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-cell">Buttons:</td>
                            <td class="table-cell">
                                <button id="buttonControl"></button>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-cell">Readonly:</td>
                            <td class="table-cell"><span id="readonlyControl"></a></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Link:</td>
                            <td class="table-cell"><a id="linkControl"></a><br/><input id="urlTextboxControl" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Link Panel:</td>
                            <td class="table-cell"><a id="linkPanelControl"><span id="panelReadonly"></span> [ <span id="panelUrl"></span> ]</a></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Images:</td>
                            <td class="table-cell">
                                <img id="imageControl"></img><br/>
                                <radiogroup id="imagePathControl">
                                    <radiogroupitem class="radio-inline"><input type="radio" /><label></label></radiogroupitem>
                                </radiogroup>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-4">
                    <h3>What's in the model?</h3>
                    <table class="table table-bordered">
                        <tr>
                            <td class="table-cell">Text value:</td>
                            <td class="table-cell" id="stringValueReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Url value:</td>
                            <td class="table-cell" id="urlValueReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Password:</td>
                            <td class="table-cell" id="passwordValueReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Bool value:</td>
                            <td class="table-cell" id="booleanValueReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Selected option:</td>
                            <td class="table-cell" id="selectedValueReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Multi-selected options:</td>
                            <td class="table-cell" id="multipleSelectedValuesReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Radio button selection:</td>
                            <td class="table-cell" id="radioSelectedOptionReadout"></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Image path value:</td>
                            <td class="table-cell" id="imagePathValueReadout"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
                                            
                                        

People

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example8",
    {
        peopleList:
        {
            bind:   "people",
            repeat:
            {
                peopleListItemTemplate:
                {
                    getKey:     function(data){return "person-"+this.index;},
                    controls:
                    {
                        personNameLabel:    { bind:     "name" },
                        childCountLabel:    { bind:     "children.length" },
                        addChildLink:       { onclick:  function(){this.data("children").push({name:"New Child"});} },
                        renderTimeSection:  { bind:     { display: "...showRenderTimes" } },
                        renderTimeLabel:    { bind:     function(data){return new Date().getSeconds();} },
                        childList:
                        {
                            bind:   "children",
                            repeat:
                            {
                                childListItemTemplate:
                                {
                                    getKey:     function(data){return "person-"+this.parent.parent.data("name")+"-child-"+this.index;},
                                    controls:
                                    {
                                        childNameLabel:         { bind: "name" },
                                        childRenderTimeSection: { bind: { display: "...showRenderTimes" } },
                                        childRenderTimeLabel:   { bind: function(data){return new Date().getSeconds();} },
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        showRenderTimesCheckbox:    { bind: "showRenderTimes" }
    },
    function(adapter)
    {
        adapter.data
        ("",
        {
            showRenderTimes:    false,
            people:
            [
                {name:"Anabelle",   children: ["Arnie","Anders","Apple"]},
                {name:"Bertie",     children: ["Boutros-Boutros","Bee-bop","Brianna","Barbie"]},
                {name:"Charles",    children: ["Cayenne","Cleopatra"]}
            ]
        });
    }
);
                                            
                                        

View

                                            
<div id="example1">
    <div class="example">
        <div class="well">
            <h2>People</h2>
            <ul id="peopleList">
                <li id="peopleListItemTemplate">
                    <div>
                        <span id="personNameLabel"> </span> has <span id="childCountLabel"> </span> children:
                        <a id="addChildLink" class="clickable">Add child</a>
                        <span id="renderTimeSection" class="renderTime">
                            (person rendered at <span id="renderTimeLabel"> </span>)
                        </span>
                    </div>
                    <ul id="childList">
                        <li id="childListItemTemplate">
                            <span id="childNameLabel"> </span>
                            <span id="childRenderTimeSection" class="renderTime">
                                (child rendered at <span id="childRenderTimeLabel"> </span>)
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
            <label><input id="showRenderTimesCheckbox" type='checkbox' /> Show render times</label> 
        </div>
    </div>
</div>
                                            
                                        

Hello !

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example9",
    {
        inputPanel:
        {
            bind:       "input",
            controls:
            {
                firstNameTextbox9:
                {
                    focused:    true,
                    bind:       { value: { to: "firstName", updateon: ["keydown", "keyup", "change"] } },
                    onescape:   function(){ this.value(""); }
                },
                lastNameTextbox9:
                {
                    bind:       { value: { to: "lastName", updateon: ["keydown", "keyup", "change"] } },
                    onescape:   function(){this.value("");}
                }
            }
        },
        helloMessage9:
        {
            bind:       { value: "input", display: function(){return this.data.hasValue("input.firstName") || this.data.hasValue("input.lastName");} },
            controls:
            {
                nameLabels:
                {
                    selector:   ".name",
                    bind:       function(data){return (this.data("firstName")||"") + (this.data("firstName") && this.data("lastName")?" ":"") + (this.data("lastName")||"");}
                }
            }
        }
    }
);
                                            
                                        

View

                                            
<div id="example3">
    <div class="example">
        <div class="well form-group">
            <div id="inputPanel">
                <div><input id="firstNameTextbox9" autocomplete="off" class="form-control" placeholder="Enter your first name:" /></div>
                <div><input id="lastNameTextbox9" autocomplete="off" class="form-control" placeholder="Enter your last name:" /></div>
            </div>
            <div id="helloMessage9">
                <p>Hello <span class="name"></span>!</p>
                <p>Pardon me <span class="name"></span>, but do you have any grey poupon?</p>
            </div>
        </div>
    </div>
</div>
                                            
                                        

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example10",
    {
        example10container:
        {
            type:       "panel",
            classes:    ["example", "well"],
            controls:
            {
                well:
                {
                    selector:   ".well",
                    type:       "panel",
                    classes:    ["well", "form-group"],
                    controls:
                    {
                        betterNewItem10:
                        {
                            type:       "input",
                            classes:    ["form-control"],
                            bind:       { value: { to: "newItem", updateon: ["keydown", "keyup", "change"] } },
                            onenter:    function(){this.parent.controls.betterAddNewItemButton10.click();}
                        },
                        betterAddNewItemButton10:
                        {
                            type:       "button",
                            classes:    ["btn"],
                            value:      "Add",
                            bind:       { enabled: "newItem.length" },
                            onclick:
                            function()
                            {
                                if (this.data("newItem.length")>0 && this.data("items").indexOf(this.data("newItem"))==-1)
                                this.data("items").push(this.data("newItem"));
                                this.data("newItem","");
                            }
                        }
                    }
                },
                itemsTitle:
                {
                    type:   "readonly",
                    value:  "Your items:"
                },
                formgroup:
                {
                    selector:   ".listContainer",
                    type:       "panel",
                    classes:    ["listContainer", "well", "form-group"],
                    controls:
                    {
                        betterItemsList10:
                        {
                            type:       "multiselect",
                            classes:    ["form-control"],
                            bind:       { value: "selected", items: "items" }
                        },
                        listButtons:
                        {
                            selector:   ".listButtons",
                            type:       "panel",
                            controls:
                            {
                                removeItemButton10:
                                {
                                    type:       "button",
                                    classes:    ["btn"],
                                    value:      "Remove",
                                    bind:       {enabled: "items.length"},
                                    onclick:    function(){this.data("items").removeAll(this.parent.parent.controls.betterItemsList10.value());}
                                },
                                sortItemsButton:
                                {
                                    type:       "button",
                                    classes:    ["btn"],
                                    value:      "Sort",
                                    bind:       { enabled: { when: "items.length", ">": 1 } },
                                    onclick:    function(){this.data("items").sort();}
                                }
                            }
                        }
                    }
                }
            }
        },
        example10model:  { bind: { value: { to: function(){return JSON.stringify(this.data(), null, '    ');}, root: "" } } }
    },
    function(adapter) { adapter.data("", {newItem:"", items: ["Fries","Eggs Benedict","Ham","Cheese"]}); }
);
                                            
                                        

View

                                            
<div id="example10">
    <div id="example10container" class="example">
    </div>
</div>
                                            
                                        

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example11",
    {
        newTodo:
        {
            bind:       {value: {to: "newTodo", updateon:["keyup", "change"]}}, 
            onenter:    function(){this.parent.controls.addTodo.click();}
        },
        addTodo:        {onclick: function()
        {
            this.data("todos").push({description: this.data("newTodo"), done: false});
            this.data("newTodo", "");
        }},
        todoList:
        {
            bind:   "todos",
            repeat:
            {
                todoListItem:
                {
                    controls:
                    {
                        todoDone:           {bind: "done"},
                        todoDescription:    {bind: {value: "description", classes: {strikethrough: "done"}}},
                        removeTodo:         {onclick: function()
                        {
                            this.data("...todos").remove(this.data());
                        }}
                    }
                }
            }
        },
        example11model:  { bind: { value: { to: function(){return JSON.stringify(this.data(), null, '    ');}, root: "" } } }
    },
    function(adapter) { adapter.data("todos", []); }
);
                                            
                                        

View

                                            
<div id="example2">
    <div class="example">
        <style>.strikethrough{text-decoration: line-through;}</style>
        <div class="well form-group">
            <h1 id="example11title"></h1>
            <fieldset>
                <input id="newTodo" type="text">
                <button id="addTodo">Add Todo</button>
            </fieldset>
            <ul id="todoList">
                <li id="todoListItem">
                    <input id="todoDone" type="checkbox">
                    <span id="todoDescription"></span>
                    <button id="removeTodo">Remove</button>
                </li>
            </ul>
        </div>
    </div>
</div>
                                            
                                        

Model


                                        

View Adapter

                                            
root.atomic.ready(function(atomic)
{
    var textboxControl  = atomic.viewAdapterFactory.createFactory
    (
        {
            controls:
            {
                label:
                {
                    selector:   ".textbox-label"
                },
                input:
                {
                    selector:   ".textbox-input"
                }
            },
            properties:
            {
                label:
                {
                    get: function(){return this.controls.label.value();},
                    set: function(value){this.controls.label.value(value);}
                },
                value:  function(){return this.controls.input.value}
            },
            extensions:
            [{
                initializers:
                {
                    label:  function(adapter, value){adapter.label = value;}
                }
            }]

        },
        "#example12 .textbox-field-control"
    );
    var readonlyControl = atomic.viewAdapterFactory.createFactory
    (
        {
            controls:
            {
                label:
                {
                    selector:   ".readonly-label"
                },
                readout:
                {
                    selector:   ".readonly-readout"
                }
            },
            properties:
            {
                label:
                {
                    get: function(){return this.controls.label.value();}, 
                    set: function(value){this.controls.label.value(value);}
                },
                value:  function(){return this.controls.readout.value}
            },
            extensions:
            [{
                initializers:
                {
                    label:  function(adapter, value){adapter.label = value;}
                }
            }]

        },
        "#example12 .readonly-field-control"
    );
    atomic.viewAdapterFactory.launch
    (
        "#example12",
        {
            example12container:
            {
                controls:
                {
                    firstName:
                    {
                        factory:    textboxControl, 
                        label:      "First Name:", 
                        bind:       {value: {to: "firstName", updateon: ["keyup", "change"] } }
                    },
                    lastName:
                    {
                        factory:    textboxControl, 
                        label:      "Last Name:", 
                        bind:       {value: {to: "lastName", updateon: ["keyup", "change"] } }
                    },
                    fullName:
                    {
                        factory:    readonlyControl, 
                        label:      "Full Name:", 
                        bind: 
                        {
                            value:      function()
                            {
                                return (this.data("firstName")||"") + " " + (this.data("lastName")||"");
                            }, 
                            display:    function()
                            {
                                return (this.data("firstName")||"").length > 0
                                ||
                                (this.data("lastName")||"").length > 0;
                            } 
                        }
                    }
                }
            }
        }
    );
});
                                            
                                        

View

                                            
<div id="example2">
    <div class="example">
        <div id="example12container" class="well form-group">
            <div class="textbox-field-control">
                <label class="textbox-label"></label>
                <input class="textbox-input">
            </div>
            <div class="readonly-field-control">
                <label class="readonly-label"></label>
                <span class="readonly-readout"></span>
            </div>
        </div>
    </div>
</div>
                                            
                                        

Control bindings

Readonly with attributes: This control has attributes
Text control (reacts to disabled):
Text control (reacts to display):
Text control (reacts to enabled):
Label control (reacts to for):
Panel control (reacts to id):
The id of this panel changes dynamically
Panel control (reacts to tooltip):
The tooltip of this panel changes dynamically.
Try hovering the mouse over it.
Textarea control (reacts to value):
Panel control (reacts to classes):
The classes applied to this panel changes dynamically.
Image control (reacts to alt):

Settings

Disabled:
Display:
Enabled:
For:
Id:
Tooltip:
Value:
Add Border:
Add Bold:
Add Italics:
Add Padding:
Alt:

What's in the view?

Readonly with attributes:
Text control (reacts to disabled):
Text control (reacts to display):
Text control (reacts to enabled):
Label control (reacts to for):
Panel control (reacts to id):
Panel control (reacts to tooltip):
Textarea control (reacts to value):
Panel control (reacts to classes):
Image control (reacts to alt):

Model


                                        

View Adapter

                                            
root.atomic.launch
(
    "#example13",
    {
        readonlyWithAttributesControl:          { bind: { attributes: { to: "settings", root: "settings" } } },
        disabledExampleControl:                 { bind: { disabled: "settings.disabled" } },
        displayExampleControl:                  { bind: { display: "settings.display" } },
        enabledExampleControl:                  { bind: { enabled: "settings.enabled" } },
        labelForControl:                        { bind: { for: "settings.for" } },
        dynamicIdControl:                       { bind: { id: "settings.id" } },
        tooltipControl:                         { bind: { tooltip: "settings.tooltip" } },
        valueControl:                           { bind: { value: "settings.value" } },
        classesControl:
        {
            bind:
            {
                classes:
                {
                    addBorder:  { when: "classes.addBorder" },                     // default operation is a bool check
                    addItalics: { when: "classes.addItalics" }, 
                    addBold:    { when: "classes.addBold",      equals: true },    // alternative operation equals
                    addPadding: { when: "classes.addPadding",   notequals: false } // alternative operation notequals
                }
            }
        },
        altControl:                             { bind: { alt: "settings.alt" } },




        disabledCheckbox:                       { bind: "settings.disabled" },
        displayCheckbox:                        { bind: "settings.display" },
        enabledCheckbox:                        { bind: "settings.enabled" },
        forList:                                { bind: { value: "settings.for",    items: "controls" } },
        idTextbox:                              { bind: { value: { to: "settings.id",        updateon: ["keydown", "keyup", "change"] } } },
        tooltipTextbox:                         { bind: { value: { to: "settings.tooltip",   updateon: ["keydown", "keyup", "change"] } } },
        valueTextbox:                           { bind: { value: { to: "settings.value",     updateon: ["keydown", "keyup", "change"] } } },
        addBorderCheckbox:                      { bind: "classes.addBorder" },
        addBoldCheckbox:                        { bind: "classes.addBold" },
        addItalicsCheckbox:                     { bind: "classes.addItalics" },
        addPaddingCheckbox:                     { bind: "classes.addPadding" },
        altTextbox:                             { bind: { value: { to: "settings.alt",   updateon: ["keydown", "keyup", "change"] } } },




        /* BEGIN: these controls are here to display the contents of the view */

        readonlyWithAttributesControlWrapper:   {},
        disabledExampleControlWrapper:          {},
        displayExampleControlWrapper:           {},
        enabledExampleControlWrapper:           {},
        labelForControlWrapper:                 {},
        dynamicIdControlWrapper:                {},
        tooltipControlWrapper:                  {},
        valueControlWrapper:                    {},
        classesControlWrapper:                  {},
        altControlWrapper:                      {},
        readonlyWithAttibutesControlReadout:    { bind: { value: { to: function(item){item("settings"); return this.parent.controls.readonlyWithAttributesControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");}, root: "settings" } } },
        disabledExampleControlReadout:          { bind: { value: { to: function(item){item("settings.disabled"); return this.parent.controls.disabledExampleControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        displayExampleControlReadout:           { bind: { value: { to: function(item){item("settings.display"); return this.parent.controls.displayExampleControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        enabledExampleControlReadout:           { bind: { value: { to: function(item){item("settings.enabled"); return this.parent.controls.enabledExampleControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        labelForControlReadout:                 { bind: { value: { to: function(item){item("settings.for"); return this.parent.controls.labelForControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        dynamicIdControlReadout:                { bind: { value: { to: function(item){item("settings.id"); return this.parent.controls.dynamicIdControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        tooltipControlReadout:                  { bind: { value: { to: function(item){item("settings.tooltip"); return this.parent.controls.tooltipControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        valueControlReadout:                    { bind: { value: { to: function(item){item("settings.value"); return this.parent.controls.valueControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },
        classesControlReadout:                  { bind: { value: { to: function(item){item("classes"); return this.parent.controls.classesControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");}, root: "classes" } } },
        altControlReadout:                      { bind: { value: { to: function(item){item("settings.alt"); return this.parent.controls.altControlWrapper.value().replace(/\</g, "<").replace(/\>/g, ">");} } } },

        /* END: these controls are here to display the contents of the view */

        example13model:                         { bind: { value: { to: function(){return JSON.stringify(this.data(), null, '    ');}, root: "" } } }
    },
    function(adapter)
    {
        adapter.data("", 
        {
            settings:
            {
                disabled:       false,
                display:        true,
                enabled:        true,
                for:            "disabledExampleControl",
                id:             "someUniqueId",
                tooltip:        "This is a tooltip!",
                value:          "A value fit for a control",
                alt:            "Depending on your browser this text might appear when the value property of the image has not been set or bound or is non existent."
            },
            classes:
            {
                addBorder:      false,
                addBold:        false,
                addItalics:     false,
                addPadding:     false
            },
            controls:   ["disabledExampleControl", "displayExampleControl", "enabledExampleControl"]
        });
    }
);
                                            
                                        

View

                                            
<div id="example13">
    <div class="example">
        <div class="well">
            <div class="row">
                <div class="col-md-8">
                    <h3>Control bindings</h3>
                    <style>
                        .addBorder  { border: solid 2px black; }
                        .addBold    { font-weight: bold; }
                        .addItalics { font-style: italic; }
                        .addPadding { padding: 20px; }
                    </style>
                    <table class="table table-bordered">
                        <tr>
                            <td class="table-cell">Readonly with attributes:</td>
                            <td class="table-cell" id="readonlyWithAttributesControlWrapper"><span id="readonlyWithAttributesControl">This control has attributes</span></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to disabled):</td>
                            <td class="table-cell" id="disabledExampleControlWrapper"><input id="disabledExampleControl" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to display):</td>
                            <td class="table-cell" id="displayExampleControlWrapper"><input id="displayExampleControl" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to enabled):</td>
                            <td class="table-cell" id="enabledExampleControlWrapper"><input id="enabledExampleControl" /></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Label control (reacts to for):</td>
                            <td class="table-cell" id="labelForControlWrapper"><label id="labelForControl">This label can be set for another element.<br/>Clicking on this label will set focus to that control.</label></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Panel control (reacts to id):</td>
                            <td class="table-cell" id="dynamicIdControlWrapper"><div id="dynamicIdControl">The id of this panel changes dynamically</div></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Panel control (reacts to tooltip):</td>
                            <td class="table-cell" id="tooltipControlWrapper"><div id="tooltipControl">The tooltip of this panel changes dynamically.<br/>Try hovering the mouse over it.</div></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Textarea control (reacts to value):</td>
                            <td class="table-cell" id="valueControlWrapper"><textarea id="valueControl"></textarea></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Panel control (reacts to classes):</td>
                            <td class="table-cell" id="classesControlWrapper"><div id="classesControl">The classes applied to this panel changes dynamically.</div></td>
                        </tr>
                        <tr>
                            <td class="table-cell">Image control (reacts to alt):</td>
                            <td class="table-cell" id="altControlWrapper"><img id="altControl" src="nonexistent.png" width="150" height="60" /></td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-4">
                    <h3>Settings</h3>
                    <table class="table table-bordered">
                        <tr class="table-row">
                            <td class="table-cell">Disabled:</td>
                            <td class="table-cell"><input id="disabledCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Display:</td>
                            <td class="table-cell"><input id="displayCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Enabled:</td>
                            <td class="table-cell"><input id="enabledCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">For:</td>
                            <td class="table-cell"><select id="forList"></select></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Id:</td>
                            <td class="table-cell"><input id="idTextbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Tooltip:</td>
                            <td class="table-cell"><input id="tooltipTextbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Value:</td>
                            <td class="table-cell"><input id="valueTextbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Add Border:</td>
                            <td class="table-cell"><input id="addBorderCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Add Bold:</td>
                            <td class="table-cell"><input id="addBoldCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Add Italics:</td>
                            <td class="table-cell"><input id="addItalicsCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Add Padding:</td>
                            <td class="table-cell"><input id="addPaddingCheckbox" type="checkbox" class="checkbox" /></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Alt:</td>
                            <td class="table-cell"><input id="altTextbox" /></td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-12">
                    <h3>What's in the view?</h3>
                    <table class="table table-bordered">
                        <tr class="table-row">
                            <td class="table-cell">Readonly with attributes:</td>
                            <td class="table-cell" id="readonlyWithAttibutesControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to disabled):</td>
                            <td class="table-cell" id="disabledExampleControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to display):</td>
                            <td class="table-cell" id="displayExampleControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Text control (reacts to enabled):</td>
                            <td class="table-cell" id="enabledExampleControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Label control (reacts to for):</td>
                            <td class="table-cell" id="labelForControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Panel control (reacts to id):</td>
                            <td class="table-cell" id="dynamicIdControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Panel control (reacts to tooltip):</td>
                            <td class="table-cell" id="tooltipControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Textarea control (reacts to value):</td>
                            <td class="table-cell" id="valueControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Panel control (reacts to classes):</td>
                            <td class="table-cell" id="classesControlReadout"></td>
                        </tr>
                        <tr class="table-row">
                            <td class="table-cell">Image control (reacts to alt):</td>
                            <td class="table-cell" id="altControlReadout"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>