smart-house-web: leptos эсперименты
This commit is contained in:
@@ -1,159 +1,100 @@
|
|||||||
#![allow(non_snake_case)]
|
#![allow(non_snake_case)]
|
||||||
|
use leptos::ev::SubmitEvent;
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
|
|
||||||
// Iteration is a very common task in most applications.
|
|
||||||
// So how do you take a list of data and render it in the DOM?
|
|
||||||
// This example will show you the two ways:
|
|
||||||
// 1) for mostly-static lists, using Rust iterators
|
|
||||||
// 2) for lists that grow, shrink, or move items, using <For/>
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn App() -> impl IntoView {
|
fn App() -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<h1>"Iteration"</h1>
|
<h2>"Controlled Component"</h2>
|
||||||
<h2>"Static List"</h2>
|
<ControlledComponent/>
|
||||||
<p>"Use this pattern if the list itself is static."</p>
|
<h2>"Uncontrolled Component"</h2>
|
||||||
<StaticList length=5/>
|
<UncontrolledComponent/>
|
||||||
<h2>"Dynamic List"</h2>
|
|
||||||
<p>"Use this pattern if the rows in your list will change."</p>
|
|
||||||
<DynamicList initial_length=5/>
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// A list of counters, without the ability
|
|
||||||
/// to add or remove any.
|
|
||||||
#[component]
|
#[component]
|
||||||
fn StaticList(
|
fn ControlledComponent() -> impl IntoView {
|
||||||
/// How many counters to include in this list.
|
// create a signal to hold the value
|
||||||
length: usize,
|
let (name, set_name) = signal("Controlled".to_string());
|
||||||
) -> impl IntoView {
|
|
||||||
// create counter signals that start at incrementing numbers
|
|
||||||
let counters = (1..=length).map(|idx| RwSignal::new(idx));
|
|
||||||
|
|
||||||
// when you have a list that doesn't change, you can
|
|
||||||
// manipulate it using ordinary Rust iterators
|
|
||||||
// and collect it into a Vec<_> to insert it into the DOM
|
|
||||||
let counter_buttons = counters
|
|
||||||
.map(|count| {
|
|
||||||
view! {
|
view! {
|
||||||
<li>
|
<input type="text"
|
||||||
<button
|
// fire an event whenever the input changes
|
||||||
on:click=move |_| *count.write() += 1
|
// adding :target after the event gives us access to
|
||||||
>
|
// a correctly-typed element at ev.target()
|
||||||
{count}
|
on:input:target=move |ev| {
|
||||||
</button>
|
set_name.set(ev.target().value());
|
||||||
</li>
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
.collect::<Vec<_>>();
|
|
||||||
|
|
||||||
// Note that if `counter_buttons` were a reactive list
|
// the `prop:` syntax lets you update a DOM property,
|
||||||
// and its value changed, this would be very inefficient:
|
// rather than an attribute.
|
||||||
// it would rerender every row every time the list changed.
|
//
|
||||||
view! {
|
// IMPORTANT: the `value` *attribute* only sets the
|
||||||
<ul>{counter_buttons}</ul>
|
// initial value, until you have made a change.
|
||||||
|
// The `value` *property* sets the current value.
|
||||||
|
// This is a quirk of the DOM; I didn't invent it.
|
||||||
|
// Other frameworks gloss this over; I think it's
|
||||||
|
// more important to give you access to the browser
|
||||||
|
// as it really works.
|
||||||
|
//
|
||||||
|
// tl;dr: use prop:value for form inputs
|
||||||
|
prop:value=name
|
||||||
|
/>
|
||||||
|
<p>"Name is: " {name}</p>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// A list of counters that allows you to add or
|
|
||||||
/// remove counters.
|
|
||||||
#[component]
|
#[component]
|
||||||
fn DynamicList(
|
fn UncontrolledComponent() -> impl IntoView {
|
||||||
/// The number of counters to begin with.
|
// import the type for <input>
|
||||||
initial_length: usize,
|
use leptos::html::Input;
|
||||||
) -> impl IntoView {
|
|
||||||
// This dynamic list will use the <For/> component.
|
|
||||||
// <For/> is a keyed list. This means that each row
|
|
||||||
// has a defined key. If the key does not change, the row
|
|
||||||
// will not be re-rendered. When the list changes, only
|
|
||||||
// the minimum number of changes will be made to the DOM.
|
|
||||||
|
|
||||||
// `next_counter_id` will let us generate unique IDs
|
let (name, set_name) = signal("Uncontrolled".to_string());
|
||||||
// we do this by simply incrementing the ID by one
|
|
||||||
// each time we create a counter
|
|
||||||
let mut next_counter_id = initial_length;
|
|
||||||
|
|
||||||
// we generate an initial list as in <StaticList/>
|
// we'll use a NodeRef to store a reference to the input element
|
||||||
// but this time we include the ID along with the signal
|
// this will be filled when the element is created
|
||||||
// see NOTE in add_counter below re: ArcRwSignal
|
let input_element: NodeRef<Input> = NodeRef::new();
|
||||||
let initial_counters = (0..initial_length)
|
|
||||||
.map(|id| (id, ArcRwSignal::new(id + 1)))
|
|
||||||
.collect::<Vec<_>>();
|
|
||||||
|
|
||||||
// now we store that initial list in a signal
|
// fires when the form `submit` event happens
|
||||||
// this way, we'll be able to modify the list over time,
|
// this will store the value of the <input> in our signal
|
||||||
// adding and removing counters, and it will change reactively
|
let on_submit = move |ev: SubmitEvent| {
|
||||||
let (counters, set_counters) = signal(initial_counters);
|
// stop the page from reloading!
|
||||||
|
ev.prevent_default();
|
||||||
|
|
||||||
let add_counter = move |_| {
|
// here, we'll extract the value from the input
|
||||||
// create a signal for the new counter
|
let value = input_element
|
||||||
// we use ArcRwSignal here, instead of RwSignal
|
.get()
|
||||||
// ArcRwSignal is a reference-counted type, rather than the arena-allocated
|
// event handlers can only fire after the view
|
||||||
// signal types we've been using so far.
|
// is mounted to the DOM, so the `NodeRef` will be `Some`
|
||||||
// When we're creating a collection of signals like this, using ArcRwSignal
|
.expect("<input> to exist")
|
||||||
// allows each signal to be deallocated when its row is removed.
|
// `NodeRef` implements `Deref` for the DOM element type
|
||||||
let sig = ArcRwSignal::new(next_counter_id + 1);
|
// this means we can call`HtmlInputElement::value()`
|
||||||
// add this counter to the list of counters
|
// to get the current value of the input
|
||||||
set_counters.update(move |counters| {
|
.value();
|
||||||
// since `.update()` gives us `&mut T`
|
set_name.set(value);
|
||||||
// we can just use normal Vec methods like `push`
|
|
||||||
counters.push((next_counter_id, sig))
|
|
||||||
});
|
|
||||||
// increment the ID so it's always unique
|
|
||||||
next_counter_id += 1;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<div>
|
<form on:submit=on_submit>
|
||||||
<button on:click=add_counter>
|
<input type="text"
|
||||||
"Add Counter"
|
// here, we use the `value` *attribute* to set only
|
||||||
</button>
|
// the initial value, letting the browser maintain
|
||||||
<ul>
|
// the state after that
|
||||||
// The <For/> component is central here
|
value=name
|
||||||
// This allows for efficient, key list rendering
|
|
||||||
<For
|
// store a reference to this input in `input_element`
|
||||||
// `each` takes any function that returns an iterator
|
node_ref=input_element
|
||||||
// this should usually be a signal or derived signal
|
|
||||||
// if it's not reactive, just render a Vec<_> instead of <For/>
|
|
||||||
each=move || counters.get()
|
|
||||||
// the key should be unique and stable for each row
|
|
||||||
// using an index is usually a bad idea, unless your list
|
|
||||||
// can only grow, because moving items around inside the list
|
|
||||||
// means their indices will change and they will all rerender
|
|
||||||
key=|counter| counter.0
|
|
||||||
// `children` receives each item from your `each` iterator
|
|
||||||
// and returns a view
|
|
||||||
children=move |(id, count)| {
|
|
||||||
// we can convert our ArcRwSignal to a Copy-able RwSignal
|
|
||||||
// for nicer DX when moving it into the view
|
|
||||||
let count = RwSignal::from(count);
|
|
||||||
view! {
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
on:click=move |_| *count.write() += 1
|
|
||||||
>
|
|
||||||
{count}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
on:click=move |_| {
|
|
||||||
set_counters
|
|
||||||
.write()
|
|
||||||
.retain(|(counter_id, _)| {
|
|
||||||
counter_id != &id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
>
|
|
||||||
"Remove"
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</ul>
|
<input type="submit" value="Submit"/>
|
||||||
</div>
|
</form>
|
||||||
|
<p>"Name is: " {name}</p>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This `main` function is the entry point into the app
|
||||||
|
// It just mounts our component to the <body>
|
||||||
|
// Because we defined it as `fn App`, we can now use it in a
|
||||||
|
// template as <App/>
|
||||||
fn main() {
|
fn main() {
|
||||||
leptos::mount::mount_to_body(App)
|
leptos::mount::mount_to_body(App)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user