Function leptos_core::For
source · pub fn For<E, T, G, I, K>(
cx: Scope,
props: ForProps<E, T, G, I, K>
) -> Memo<Vec<Element>>where
E: Fn() -> Vec<T> + 'static,
G: Fn(Scope, &T) -> Element + 'static,
I: Fn(&T) -> K + 'static,
K: Eq + Hash,
T: Eq + Debug + 'static,
Expand description
Iterates over children and displays them, keyed by the key
function given.
This is much more efficient than naively iterating over nodes with .iter().map(|n| view! { cx, ... })...
,
as it avoids re-creating DOM nodes that are not being changed.
#[derive(Copy, Clone, Debug, PartialEq, Eq)]
struct Counter {
id: usize,
count: RwSignal<i32>
}
fn Counters(cx: Scope) -> Element {
let (counters, set_counters) = create_signal::<Vec<Counter>>(cx, vec![]);
view! {
cx,
<div>
<For
// a function that returns the items we're iterating over; a signal is fine
each=counters
// a unique key for each item
key=|counter| counter.id
>
{|cx: Scope, counter: &Counter| {
let count = counter.count;
view! {
cx,
<button>"Value: " {move || count.get()}</button>
}
}
}
</For>
</div>
}
}