Struct leptos::ForProps

pub struct ForProps<IF, I, T, EF, N, KF, K>where
    IF: Fn() -> I + 'static,
    I: IntoIterator<Item = T>,
    EF: Fn(T) -> N + 'static,
    N: IntoView + 'static,
    KF: Fn(&T) -> K + 'static,
    K: Eq + Hash + 'static,
    T: 'static,{
    pub each: IF,
    pub key: KF,
    pub children: EF,
}

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 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> }
       />
    }

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

impl<IF, I, T, EF, N, KF, K> ForProps<IF, I, T, EF, N, KF, K>where IF: Fn() -> I + 'static, I: IntoIterator<Item = T>, EF: Fn(T) -> N + 'static, N: IntoView + 'static, KF: Fn(&T) -> K + 'static, K: Eq + Hash + 'static, T: 'static,

pub fn builder() -> ForPropsBuilder<IF, I, T, EF, N, KF, K, ((), (), ())>

Create a builder for building ForProps. On the builder, call .each(...), .key(...), .children(...) to set the values of the fields. Finally, call .build() to create the instance of ForProps.

Trait Implementations

impl<IF, I, T, EF, N, KF, K> IntoView for ForProps<IF, I, T, EF, N, KF, K>where IF: Fn() -> I + 'static, I: IntoIterator<Item = T>, EF: Fn(T) -> N + 'static, N: IntoView + 'static, KF: Fn(&T) -> K + 'static, K: Eq + Hash + 'static, T: 'static,

fn into_view(self) -> View

Converts the value into View.