item-changed firing twice in repeatitem

JoernT commented 10 months ago

adding a <fx-message event="item-changed" target="r-task">Index Changed {event('index')}</fx-message>

to todo2.html example shows the event firing twice instead of once.

pherk commented 2 months ago

I don't know, whether my observations will help you to improve fx-repeat:

if the highlighted item is clicked, the 'item-changed' event will fire too.
if the fx-message tag is placed within the template tag, it will fire multiple times (no. of fx-repeatitem elements)
the pathologic cases: -- if the fx-message tag is placed within the repeat but outside the template, it is only fired once (message and repeat-index correct) -- fx-message with fx-action produces an additional strange interaction, if placed outside the template tag: the message is correct but the repeat-index attribute is offset by the number of additional nodes outside template (my guess)

setup from fore-exist, but fore-dev is latest dev

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
    <title>repeat test</title>
    <link href="../resources/css/fore.css" rel="stylesheet"/>
    <style>
        [repeat-index] {
            background-color : yellow;
        }
    </style>
</head>
<body>
    <fx-fore>
        <fx-model>
            <fx-message event="model-construct-done">event model ready</fx-message>
            <fx-instance>
                <data>
                    <sub value="result1"/>
                    <sub value="result2"/>
                    <sub value="result3"/>
                    <sub value="result4"/>
                    <sub value="result5"/>
                    <sub value="result6"/>
                </data>
            </fx-instance>
        </fx-model>

        <fx-repeat id="r-sub" ref="sub">
<!--
            <fx-message event="item-changed" target="r-sub">Index Changed(1): {event('index')}</fx-message>
            <fx-action event="item-changed" target="r-sub">
                <fx-message>Index changed(2): {event('index')}</fx-message>
            </fx-action>
            <fx-action event="item-changed" target="r-sub">
                <fx-message>Index changed(3): {event('index')}</fx-message>
            </fx-action>
-->
            <template>
                <fx-message event="item-changed" target="r-sub">Index Changed(4): {event('index')}</fx-message>
                <fx-output ref="./@value"/>
            </template>
        </fx-repeat>
      </fx-fore>
    <script type="module" src="../resources/script/fore-dev.js"/>
  </body>
</html>

JoernT commented 2 months ago

Thanks for this detailed report. That's something we can work with.

Regarding case one: it shoulf of course just fire once. We'll fix that.

Case 2: this is a result of everything being cloned n-times so we end up with n handlers here. It should however only fire on the active repeatitem. We were already working on these issues.

Case 3: was actually never intended to work ;) but docs are not clear here i guess. And - why not? I tend to make it work rather than to restrict it too much but we'll need to look into it.

Might take some time - holiday season :)

Thanks again - very helpful report.

Peter Herkenrath @.***> schrieb am So., 4. Aug. 2024, 14:40:

I don't know, whether my observations will help you to improve fx-repeat:

if the highlighted item is clicked, the 'item-changed' event will fire too.

if the fx-message tag is placed within the template tag, it will fire multiple times (no. of fx-repeatitem elements)

the pathologic cases: -- if the fx-message tag is placed within the repeat but outside the template, it is only fired once (message and repeat-index correct) -- fx-message with fx-action produces an additional strange interaction, if placed outside the template tag: the message is correct but the repeat-index attribute is offset by the number of additional nodes outside template (my guess)

setup from fore-exist, but fore-dev is latest dev
repeat test event model ready Githubissues.
Githubissues is a development platform for aggregating issues.

Jinntec / Fore

item-changed firing twice in repeatitem #235