mirror of https://github.com/sveltejs/svelte
fix: improve bind:this support for each blocks (#10510)
parent
1700e47858
commit
df10204fcc
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: improve bind:this support for each blocks
|
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
const { text } = $props();
|
||||||
|
|
||||||
|
let boundParagraph = $state();
|
||||||
|
|
||||||
|
export function changeBackgroundToRed() {
|
||||||
|
boundParagraph.style.backgroundColor = 'red';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p bind:this={boundParagraph}>
|
||||||
|
{text}
|
||||||
|
</p>
|
@ -0,0 +1,35 @@
|
|||||||
|
import { flushSync } from '../../../../src/main/main-client';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [btn, btn2, btn3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<div><p style="background-color: red;">b1</p><button>change</button><button>delete</button></div><div><p>b2</p><button>change</button><button>delete</button></div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn2?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<div><p>b2</p><button>change</button><button>delete</button></div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => {
|
||||||
|
btn3?.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<div><p style="background-color: red;">b2</p><button>change</button><button>delete</button></div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
import Paragraph from './Paragraph.svelte';
|
||||||
|
let boundParagraphs = $state([]);
|
||||||
|
|
||||||
|
let store = $state([
|
||||||
|
{ id: 1, text: 'b1' },
|
||||||
|
{ id: 2, text: 'b2' }
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each store as text, i (text.id)}
|
||||||
|
<div>
|
||||||
|
<Paragraph bind:this={boundParagraphs[i]} text={text.text}></Paragraph>
|
||||||
|
<button onclick={() => boundParagraphs[i].changeBackgroundToRed()}>
|
||||||
|
change
|
||||||
|
</button>
|
||||||
|
<button onclick={() => store.splice(store.indexOf(text), 1)}>
|
||||||
|
delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
Loading…
Reference in new issue