Sunday, April 5, 2020

Data from HTML attribute - Declarative Programming with Web Components

How to pass JSON string from HTML as object for data binding of Polymer Web Component?

The answer resides in embedding of data into URL of iron-ajax.
vaadin-elements-demo.html
<iron-ajax url='data:text/json;charset=utf-8, 
                [{"label": "Hydrogen", "value": "H"} 
                ,{"label": "Oxygen"  , "value": "O"} 
                ,{"label": "Carbon"  , "value": "C"} 
                ]'
           last-response="{{lifeElements}}" auto handle-as="json"></iron-ajax>
<vaadin-combo-box id="cbDemo"
        label="Label, value:[[cbDemoValue]]"
        placeholder="Placeholder"
        items="[[lifeElements]]"
        value="{{ cbDemoValue }}"
>
    <template>
        [[index]]: [[item.label]] <b>[[item.value]]</b>
    </template>
</vaadin-combo-box>
<vaadin-combo-box label="Disabled" disabled value="H" items="[[lifeElements]]"></vaadin-combo-box>
<vaadin-combo-box label="Read-only" readonly value="O" items="[[lifeElements]]"></vaadin-combo-box>

No comments:

Post a Comment