Issue with built-in template repeat #179
Assignees
Comments
|
FYI @theengineear I'll try to build a working example eventually, just bookmarking this for later |
This was referenced Jul 23, 2024
|
👋🏻 @Kelketek thank you for taking up this issue in #183. Just wanted to share an FYI that we recognize there are no contributing guidelines for you to follow and opened #186 to document a few thoughts. As you are the first notable community contributor to the project your feedback is welcome on the guidelines as well. Thanks! |
|
Thanks, @klebba ! I'll take a look :) |
|
Repro case: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo #179 issue</title>
</head>
<body>
<demo-179></demo-179>
<script type="module">
import XElement from "https://deno.land/x/[email protected]/x-element.js";
class Demo179 extends XElement {
static get properties() {
return {
items: {
type: Array,
default: () => [
{ id: 'a' },
{ id: 'b' },
{ id: 'c' }
],
},
lookup: {
type: Object,
default: () => {
return {
a: 'foo',
b: 'bar',
c: 'baz',
};
}
},
}
}
static template(html, { map }) {
return ({ items, lookup }) => {
return html`
<div>
<ul>
${
// x-element behavior
map(items, item => item.id, item => {
return html`<li id="${ item.id }">${ lookup?.[item.id] }</li>`;
})
}
</ul>
<ul>
${
// native behavior
items?.map(item => {
return html`<li id="${ item.id }">${ lookup?.[item.id] }</li>`;
})
}
</ul>
<pre>${JSON.stringify(lookup, null, 2)}</pre>
</div>
`;
};
}
}
customElements.define('demo-179', Demo179);
</script>
<script>
const demo = document.querySelector('demo-179');
let flip = 0;
setInterval(() => {
if (flip % 2 === 0) {
demo.lookup = {
a: 'sizzle',
b: 'pop',
c: 'buzz',
};
} else {
demo.lookup = {
a: 'fizzle',
b: 'bop',
c: 'fuzz',
};
}
console.log(demo.lookup);
++flip;
}, 1000);
</script>
</body>
</html>JSFiddle: https://jsfiddle.net/k8de6qcr/1/ |
Kelketek
added a commit
to Kelketek/x-element
that referenced
this issue
Oct 8, 2024
Kelketek
added a commit
to Kelketek/x-element
that referenced
this issue
Oct 8, 2024
Kelketek
added a commit
to Kelketek/x-element
that referenced
this issue
Oct 8, 2024
klebba
pushed a commit
that referenced
this issue
Oct 8, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
TODO: needs a working repro case.
What's wrong:
The repeater does not re-render when
datachanges, only when the list ofnodesis updated:Workaround:
Coalesce
nodeswithdatainto a new list to feed the repeater (ensure new list reference is always generated)Using version 1.0
The text was updated successfully, but these errors were encountered: