pub fn For<IF, I, T, EF, N, KF, K>(
props: ForProps<IF, I, T, EF, N, KF, K>
) -> impl IntoView
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! { ... })...
,
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>
}
#[component]
fn Counters() -> impl IntoView {
let (counters, set_counters) = create_signal::<Vec<Counter>>(vec![]);
view! {
<div>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move || counters.get()
// a unique key for each item
key=|counter| counter.id
// renders each item to a view
children=move |counter: Counter| {
view! {
<button>"Value: " {move || counter.count.get()}</button>
}
}
/>
<For
// a function that returns the items we're iterating over; a signal is fine
each=move || counters.get()
// a unique key for each item
key=|counter| counter.id
// renders each item to a view
children=move |counter: Counter| {
view! {
<button>"Value: " {move || counter.count.get()}</button>
}
}
/>
</div>
}
}
§Required Props
- each: [
IF
]- Items over which the component should iterate.
- key: [
KF
]- A key function that will be applied to each item.
- children: [
EF
]-
A function that takes the item, and returns the view that will be displayed for each item.
§Syntax
This can be passed directly in the
view
children of the<For/>
by using thelet:
syntax to specify the name for the data variable passed in the argument.let (data, set_data) = create_signal(vec![0, 1, 2]); view! { <For each=move || data.get() key=|n| *n // stores the item in each row in a variable named `data` let:data > <p>{data}</p> </For> }
is the same as
let (data, set_data) = create_signal(vec![0, 1, 2]); view! { <For each=move || data.get() key=|n| *n children=|data| view! { <p>{data}</p> } /> }
-