pub struct ForProps<IF, I, T, EF, N, KF, K>{
pub each: IF,
pub key: KF,
pub children: EF,
}
Expand description
Props for the For
component.
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> } /> }
-
Fields§
§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 the
let:
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> }
/>
}
Implementations§
Trait Implementations§
Auto Trait Implementations§
impl<IF, I, T, EF, N, KF, K> Freeze for ForProps<IF, I, T, EF, N, KF, K>
impl<IF, I, T, EF, N, KF, K> RefUnwindSafe for ForProps<IF, I, T, EF, N, KF, K>
impl<IF, I, T, EF, N, KF, K> Send for ForProps<IF, I, T, EF, N, KF, K>
impl<IF, I, T, EF, N, KF, K> Sync for ForProps<IF, I, T, EF, N, KF, K>
impl<IF, I, T, EF, N, KF, K> Unpin for ForProps<IF, I, T, EF, N, KF, K>
impl<IF, I, T, EF, N, KF, K> UnwindSafe for ForProps<IF, I, T, EF, N, KF, K>
Blanket Implementations§
source§impl<T> BorrowMut<T> for Twhere
T: ?Sized,
impl<T> BorrowMut<T> for Twhere
T: ?Sized,
source§fn borrow_mut(&mut self) -> &mut T
fn borrow_mut(&mut self) -> &mut T
source§impl<T> Instrument for T
impl<T> Instrument for T
source§fn instrument(self, span: Span) -> Instrumented<Self>
fn instrument(self, span: Span) -> Instrumented<Self>
source§fn in_current_span(self) -> Instrumented<Self>
fn in_current_span(self) -> Instrumented<Self>
source§impl<T> IntoEither for T
impl<T> IntoEither for T
source§fn into_either(self, into_left: bool) -> Either<Self, Self>
fn into_either(self, into_left: bool) -> Either<Self, Self>
self
into a Left
variant of Either<Self, Self>
if into_left
is true
.
Converts self
into a Right
variant of Either<Self, Self>
otherwise. Read moresource§fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
self
into a Left
variant of Either<Self, Self>
if into_left(&self)
returns true
.
Converts self
into a Right
variant of Either<Self, Self>
otherwise. Read more