Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

make Leptos iteration example equivalent of Dioxus iteration example (#2191)

Browse source
This commit is contained in:
Greg Johnston 2024-03-30 06:52:32 -04:00 committed by GitHub
parent 9f280a8d84
commit d77e1eb3ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 17 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
README.md
View file

@ -270,62 +270,29 @@ fn Counters() -> Element {
}
```
[While in Leptos, you would need to track keys, use the `<For>` component, create new signals, and manually clean up memory](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component):
[While in Leptos you would use the `<For>` component.](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component):
```rust
fn Counters() -> Element {
let initial_counters = (0..initial_length)
.map(|id| (id, create_signal(id + 1)))
.collect::<Vec<_>>();
let (counters, set_counters) = create_signal(initial_counters);
let add_counter = move |_| {
let sig = create_signal(next_counter_id + 1);
set_counters.update(move |counters| counters.push((next_counter_id, sig)));
next_counter_id += 1;
};
let counters = RwSignal::new(vec![0; 10]);
view! {
<div>
<button on:click=add_counter>
"Add Counter"
</button>
<ul>
<For
each=counters
key=|counter| counter.0
children=move |(id, (count, set_count))| {
view! {
<li>
<button
on:click=move |_| set_count.update(|n| *n += 1)
>
{count}
</button>
<button
on:click=move |_| {
set_counters.update(|counters| {
counters.retain(|(counter_id, (signal, _))| {
if counter_id == &id {
signal.dispose();
}
counter_id != &id
})
});
}
>
"Remove"
</button>
</li>
}
}
/>
</ul>
</div>
<button on:click=move |_| counters.update(|n| n.push(n.len()))>"Add Counter"</button>
<For
each=move || 0..counters.with(Vec::len)
key=|idx| *idx
let:idx
>
<li>
<button on:click=move |_| counters.update(|n| n[idx] += 1)>
{Memo::new(move |_| counters.with(|n| n[idx]))}
</button>
<button on:click=move |_| counters.update(|n| { n.remove(idx); })>
"Remove"
</button>
</li>
</For>
}
}
```
- **`Copy` state**: Dioxus 0.1 to 0.4 relied on lifetimes to relax the rules of Rust's borrow checker. This worked well for event handlers, but struggled around async. In Dioxus 0.5, we've switched to a [`Copy` state model](https://crates.io/crates/generational-box) borrowed from Leptos.