Skip to content

Commit

Permalink
change: enable inline children for For by switching to children a…
Browse files Browse the repository at this point in the history 
…nd `bind:` (#1773)
  • Loading branch information
@gbj
gbj authored Sep 26, 2023
1 parent c5c7923 commit 3f2a9fa
Show file tree
Hide file tree
Showing 21 changed files with 110 additions and 55 deletions.
2 changes: 1 addition & 1 deletion benchmarks/src/todomvc/leptos.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ pub fn TodoMVC(todos: Todos) -> impl IntoView {
<For
each=filtered_todos
key=|todo| todo.id
view=move |todo: Todo| {
children=move |todo: Todo| {
view! { <Todo todo=todo.clone()/> }
}
/>
Expand Down
4 changes: 2 additions & 2 deletions docs/book/src/router/17_nested_routing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,8 @@ pub fn ContactList() -> impl IntoView {
// the contact list
<For each=contacts
key=|contact| contact.id
view=|contact| todo!()
>
children=|contact| todo!()
/>
// the nested child, if any
// don’t forget this!
<Outlet/>
Expand Down
2 changes: 1 addition & 1 deletion examples/counters/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ pub fn Counters() -> impl IntoView {
<For
each=counters
key=|counter| counter.0
view=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
children=move |(id, (value, set_value)): (usize, (ReadSignal<i32>, WriteSignal<i32>))| {
view! {
<Counter id value set_value/>
}
Expand Down
2 changes: 1 addition & 1 deletion examples/counters_stable/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ pub fn Counters() -> impl IntoView {
<For
each={move || counters.get()}
key={|counter| counter.0}
view=move |(id, (value, set_value))| {
children=move |(id, (value, set_value))| {
view! {
<Counter id value set_value/>
}
Expand Down
2 changes: 1 addition & 1 deletion examples/errors_axum/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ pub fn ErrorTemplate(
// a unique key for each item as a reference
key=|(index, _)| *index
// renders each item to a view
view=move |error| {
children=move |error| {
let error_string = error.1.to_string();
let error_code= error.1.status_code();
view! {
Expand Down
10 changes: 4 additions & 6 deletions examples/hackernews/src/routes/stories.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
<Story story/>
}
}
/>
let:story
>
<Story story/>
</For>
</ul>
}.into_any())
}
Expand Down
12 changes: 8 additions & 4 deletions examples/hackernews/src/routes/story.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
<For
each=move || story.comments.clone().unwrap_or_default()
key=|comment| comment.id
view=move |comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment />
</For>
</ul>
</div>
</div>
Expand Down Expand Up @@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
<For
each=move || comments.clone()
key=|comment| comment.id
view=move |comment: api::Comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment />
</For>
</ul>
}
})}
Expand Down
2 changes: 1 addition & 1 deletion examples/hackernews_axum/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view
view= move | (_, error)| {
children=move | (_, error)| {
let error_string = error.to_string();
view! {

Expand Down
10 changes: 4 additions & 6 deletions examples/hackernews_axum/src/routes/stories.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move | story: api::Story| {
view! {
<Story story/>
}
}
/>
let:story
>
<Story story/>
</For>
</ul>
}.into_any())
}
Expand Down
12 changes: 8 additions & 4 deletions examples/hackernews_axum/src/routes/story.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,10 @@ pub fn Story() -> impl IntoView {
<For
each=move || story.comments.clone().unwrap_or_default()
key=|comment| comment.id
view=move | comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment />
</For>
</ul>
</div>
</div>
Expand Down Expand Up @@ -100,8 +102,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
<For
each=move || comments.clone()
key=|comment| comment.id
view=move | comment: api::Comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment />
</For>
</ul>
}
})}
Expand Down
2 changes: 1 addition & 1 deletion examples/hackernews_islands_axum/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view
view= move | (_, error)| {
children= move | (_, error)| {
let error_string = error.to_string();
view! {

Expand Down
10 changes: 4 additions & 6 deletions examples/hackernews_islands_axum/src/routes/stories.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
<Story story/>
}
}
/>
let:story
>
<Story story/>
</For>
</ul>
}))}
</Transition>
Expand Down
2 changes: 1 addition & 1 deletion examples/hackernews_js_fetch/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ pub fn error_template(errors: Option<RwSignal<Errors>>) -> View {
// a unique key for each item as a reference
key=|(key, _)| key.clone()
// renders each item to a view
view= move |(_, error)| {
children= move |(_, error)| {
let error_string = error.to_string();
view! {

Expand Down
10 changes: 4 additions & 6 deletions examples/hackernews_js_fetch/src/routes/stories.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
<Story story/>
}
}
/>
let:story
>
<Story story/>
</For>
</ul>
}.into_any())
}
Expand Down
12 changes: 8 additions & 4 deletions examples/hackernews_js_fetch/src/routes/story.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,10 @@ pub fn Story() -> impl IntoView {
<For
each=move || story.comments.clone().unwrap_or_default()
key=|comment| comment.id
view=move |comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment/>
</For>
</ul>
</div>
</div>
Expand Down Expand Up @@ -103,8 +105,10 @@ pub fn Comment(comment: api::Comment) -> impl IntoView {
<For
each=move || comments.clone()
key=|comment| comment.id
view=move |comment: api::Comment| view! { <Comment comment /> }
/>
let:comment
>
<Comment comment />
</For>
</ul>
}
})}
Expand Down
2 changes: 1 addition & 1 deletion examples/js-framework-benchmark/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ pub fn App() -> impl IntoView {
<For
each={data}
key={|row| row.id}
view=move |row: RowData| {
children=move |row: RowData| {
let row_id = row.id;
let (label, _) = row.label;
on_cleanup({
Expand Down
2 changes: 1 addition & 1 deletion examples/session_auth_axum/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ pub fn ErrorTemplate(
// a unique key for each item as a reference
key=|(index, _error)| *index
// renders each item to a view
view= move |error| {
children=move |error| {
let error_string = error.1.to_string();
let error_code= error.1.status_code();
view! {
Expand Down
2 changes: 1 addition & 1 deletion examples/todo_app_sqlite_axum/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ pub fn ErrorTemplate(
// a unique key for each item as a reference
key=|(index, _error)| *index
// renders each item to a view
view= move |error| {
children=move |error| {
let error_string = error.1.to_string();
let error_code= error.1.status_code();
view! {
Expand Down
2 changes: 1 addition & 1 deletion examples/todo_app_sqlite_viz/src/error_template.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ pub fn ErrorTemplate(
// a unique key for each item as a reference
key=|(index, _error)| *index
// renders each item to a view
view= move |error| {
children= move |error| {
let error_string = error.1.to_string();
let error_code= error.1.status_code();
view! {
Expand Down
6 changes: 4 additions & 2 deletions examples/todomvc/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,10 @@ pub fn TodoMVC() -> impl IntoView {
<For
each=filtered_todos
key=|todo| todo.id
view=move |todo: Todo| view! { <Todo todo /> }
/>
let:todo
>
<Todo todo/>
</For>
</ul>
</section>
<footer
Expand Down
57 changes: 53 additions & 4 deletions leptos/src/for_loop.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,19 @@ use std::hash::Hash;
/// // a unique key for each item
/// key=|counter| counter.id
/// // renders each item to a view
/// view=move |counter: Counter| {
/// 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>
/// }
Expand All @@ -48,8 +60,45 @@ pub fn For<IF, I, T, EF, N, KF, K>(
each: IF,
/// A key function that will be applied to each item.
key: KF,
/// The view that will be displayed for each item.
view: 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.
///
/// ```rust
/// # use leptos::*;
/// # if false {
/// 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
/// ```rust
/// # use leptos::*;
/// # if false {
/// 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> }
/// />
/// }
/// # ;
/// # }
/// ```
children: EF,
) -> impl IntoView
where
IF: Fn() -> I + 'static,
Expand All @@ -60,5 +109,5 @@ where
K: Eq + Hash + 'static,
T: 'static,
{
leptos_dom::Each::new(each, key, view).into_view()
leptos_dom::Each::new(each, key, children).into_view()
}

0 comments on commit 3f2a9fa

Please sign in to comment.