Skip to content
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

Nested template being called unexpectedly #89

Open
madelson opened this issue Sep 13, 2023 · 2 comments
Open

Nested template being called unexpectedly #89

madelson opened this issue Sep 13, 2023 · 2 comments

Comments

@madelson
Copy link

madelson commented Sep 13, 2023

I have a conditionally-included template like this:

const state = reactive({ items: [], index: 0 });

...
${() => hasItem()
            ? html`
                ${() => currentItem().loaded !== false
                    ? html`
                        <img src="${() => currentItem().url}" 
                             @load="${e => onImageLoaded(e, true)}" 
                             @error="${e => onImageLoaded(e, false)}">
                        ${() => currentItem().loaded === null ? loadingAnimation : null}`
                    : html`<div style="color: red;">Item failed to load</div>`}
                <div>Current rating: ${() => currentItem().rating}</div>
            </div>`
            : loadingAnimation}
...

function hasItem() { return state.items.length > state.index; }
function currentItem() { return hasItem() ? state.items[state.index] : null; }

state is a reactive object with an array items and an integer property index. What surprises me is that sometimes I am hitting a javascript error on this line:

<div>Current rating: ${() => currentItem().rating}</div>

The problem is that currentItem() is null. However, I would have expected this not to be called because of the hasItem() conditional. Am I misunderstanding something about how Arrow is supposed to work with conditional templates?

@justin-schroeder
Copy link
Owner

I think the issue here (could be wrong) is arrow doesn’t destroy the previous template but memoizes it for future re-insertion (like <KeepAlive>) which means effects are still running on it even when it isnt mounted. Probably something we should fix in future iterations.

@madelson
Copy link
Author

Makes sense. I do think it would be desirable if the control flow could be respected. For the time being, is there any workaround to force arrow to ditch the template?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants