dnrops
/
leptos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change: enable inline children for `For` by switching to `children` and `bind:` (#1773)

This commit is contained in:
Greg Johnston 2023-09-26 14:24:02 -04:00 committed by GitHub
parent c5c79234f1
commit 3f2a9facf8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 110 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
benchmarks/src/todomvc/leptos.rs
View File

@ -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()/> }
}
/>

4
docs/book/src/router/17_nested_routing.md
View File

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

2
examples/counters/src/lib.rs
View File

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

2
examples/counters_stable/src/lib.rs
View File

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

2
examples/errors_axum/src/error_template.rs
View File

@ -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! {

8
examples/hackernews/src/routes/stories.rs
View File

@ -91,12 +91,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
let:story
>
<Story story/>
}
}
/>
</For>
</ul>
}.into_any())
}

12
examples/hackernews/src/routes/story.rs
View File

@ -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>
@ -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>
}
})}

2
examples/hackernews_axum/src/error_template.rs
View File

@ -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! {

8
examples/hackernews_axum/src/routes/stories.rs
View File

@ -90,12 +90,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move | story: api::Story| {
view! {
let:story
>
<Story story/>
}
}
/>
</For>
</ul>
}.into_any())
}

12
examples/hackernews_axum/src/routes/story.rs
View File

@ -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>
@ -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>
}
})}

2
examples/hackernews_islands_axum/src/error_template.rs
View File

@ -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! {

8
examples/hackernews_islands_axum/src/routes/stories.rs
View File

@ -98,12 +98,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
let:story
>
<Story story/>
}
}
/>
</For>
</ul>
}))}
</Transition>

2
examples/hackernews_js_fetch/src/error_template.rs
View File

@ -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! {

8
examples/hackernews_js_fetch/src/routes/stories.rs
View File

@ -95,12 +95,10 @@ pub fn Stories() -> impl IntoView {
<For
each=move || stories.clone()
key=|story| story.id
view=move |story: api::Story| {
view! {
let:story
>
<Story story/>
}
}
/>
</For>
</ul>
}.into_any())
}

12
examples/hackernews_js_fetch/src/routes/story.rs
View File

@ -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>
@ -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>
}
})}

2
examples/js-framework-benchmark/src/lib.rs
View File

@ -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({

2
examples/session_auth_axum/src/error_template.rs
View File

@ -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! {

2
examples/todo_app_sqlite_axum/src/error_template.rs
View File

@ -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! {

2
examples/todo_app_sqlite_viz/src/error_template.rs
View File

@ -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! {

6
examples/todomvc/src/lib.rs
View File

@ -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

57
leptos/src/for_loop.rs
View File

@ -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>
/// }
@ -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,
@ -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()
}