-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
slice to select multiple nodes in datadom #42
Comments
Scenario: propagate multiple values on single eventOn http-request demo we need to propagate the selected by click pokemon <custom-element>
<template>
<attribute name="name" />
<attribute url="url" />
<http-request url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0" slice="page" method="GET" header-accept="application/json"></http-request>
<variable name="slides-url">https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world</variable>
<for-each select="//slice/page/data/results/*">
<variable name="pokeid" select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"></variable>
<button
slice="name"
slice-event="click"
value="{@name}"
> <img src="{$slides-url}/{$pokeid}.svg" alt="{@name}" /> {@name} </button>
</for-each>
Selected pokemon name: {/dataset/slice/name}
</template>
</custom-element> The single attribute propagation is straight forward. <button slice-event="click" slice="//attributes/name" slice-value="{@name}" />
<button slice-event="click" slice="//attributes/url" slice-value="{$slides-url}/{$pokeid}.svg" /> How to propagate both? What if there is a need to have separate values for diffetent events? Need to define the syntax for triplets: The JSON kind of fits the bill. The keys would be unconventional: event listing (CSV?), XPath as a key. { "click tap" :
{ "//attributes/name": "{@name}"
, "//attributes/url": "{$slides-url}/{$pokeid}.svg"
}
, "hover":
{ "title": "{@name}"
}
} Declarative convention is more verbose(?) <button>
<slice slice-event="click tap" slice="//attributes/name" value="{@name}" >
<slice slice-event="click tab" slice="//attributes/url" value="{$slides-url}/{$pokeid}.svg" >
<slice slice-event="hover" slice="//attributes/title" value="{@name}" >
... img
</button The declarative syntax unlike JSON would have the perks of validation, IDE suggestions, etc. in same fashion as other DCE parts. More consistent and functional. |
Should/How to handle initial value when multiple element use same slice?<button slice-event="click" slice="xxx" value="AAA" />
<button slice-event="click" slice="xxx" value="BBB" /> It is expected that the button should set the slice value only on event and not during the initialization. <custom-element>
<button slice="" value="AAA">
<slice slice="clicked" slice-event="click" /> click to set AAA </button>
<button slice="" value="BBB">
<slice slice="clicked" slice-event="click" /> click to set BBB </button> |
|
propagation of slice/value toThe <button slice="//attributes/title" value="✈️" > <!-- slice is not initialized -->
<slice slice-event="keydown" /> <!-- sets `attributes/title` slice from button `value` -->
<slice slice-event="keyup" slice-value="🪂" /><!-- sets own value -->
<slice slice-event="click" slice-value="🚀" slice="isclicked" /> <!-- different slice, own value -->
... img
</button |
prevent slice initializationThe "action" elements like button should not change the DCE state unless acted on (clicked, etc. ). Sample of unexpected initialization by button: <input slice="nickname" value="anonymous" />
<button slice="nickname" value="broccoli" >🥦</button> <!-- would override initial slice value! --> To prevent the initialization, use <input slice="nickname" value="anonymous" />
<button slice="nickname" value="broccoli" slice-event="click tap">🥦</button> <!-- no initialization --> |
Tic-tac-toe sample #43 for events+slots handling |
slice
attribute defines the name of/datadom/slice/*
node in element to be filled during initialization and when targetted event happen (the value is changed, clicked, etc. ).In case of targetting of multiple slices or node(s) in another layer( like attribute ), XPath would identify those:
In given example the input filed should be initialized from and propagate the value into
value
attribute on the change event.The text was updated successfully, but these errors were encountered: