Svelte bind equivalent

[lebenoa]

Hello! Sorry for this dumb question. I've never use React but Svelte. And I wonder how to implement something like this in leptos

I tried reading React docs but that did not help me either.

Say for example, in Svelte

<label class="form-control">
    <input
        type="checkbox"
        bind:checked={myBoolean}
     />
    Check
</label>

For value

<input
    type="number"
    use:validator={myNumber}
    bind:value={myNumber}
    min="0"
/>

The use directive is fine. I figured out how but bind

P.S. Sorry for my bad English. I'm not a native speaker of English.

[gbj]

No worries. This framework is fairly different from React but quite similar to SolidJS, so you may have more luck there. In either case, you want to look up React or Solid "controlled components" and "uncontrolled components" for patterns.

let (name, set_name) = create_signal(cx, "gbj".to_string());
view! { cx,
  <input type="text"
    // updates the `value` property in the DOM reactively to match `name`
    prop:value=name
    // event_target_value is the equiv. of JS event.target.value
    // just a helper to smooth out some Rust/JS type awkwardness
    on:input=move |ev| set_name(event_target_value(&name))
  />
}

The equivalent goes for prop:checked and event_target_checked on a checkbox.

Basically:

1. declare a signal
2. on the relevant DOM, update the signal
3. feed the signal into the value property in the DOM

[lebenoa]

Never mind! I've decided to write in JS instead. Thanks for your help!

[gbj]

@meonako Just for the sake of clarity, your example doesn't show it being ignored -- it shows 1500 being logged with each additional 1. It's just that your console is set to collapse duplicate logs, so there's a little 1, 2, 3 next to the log each time you're pressing a key. Unless there's something I'm not understanding about the example it's working exactly as you intend it.

[lebenoa]

Ah I mean I can let this Svelte example explain this for me ig

Window.1-19-2023.8-43-19.PM.mp4

If I keep pressing 1 in this Svelte example, THE INPUT VALUE stay at 1500 while leptos goes 1500111...

Thanks again for the reply :)

[gbj]

Ahhhh okay I see. This is pretty interesting. Here's a version that works as the Svelte one does. (I edited the component slightly so I could play around with it, but I'm sure you can see the difference)

This is basically using an "uncontrolled" component with a NodeRef rather than a "controlled" component with prop:value, but using an effect to call HtmlInputElement::set_value directly. I'm not sure why calling set_value here has a different effect from setting the value prop, but... there you are.

#[component]
pub fn Input(
    cx: Scope,

    /// Max Value.
    max_value: i32,
) -> impl IntoView {
    let (reader, setter) = create_signal(cx, 0);
    let input_node = NodeRef::<HtmlElement<Input>>::new(cx);

    create_effect(cx, move |_| {
        leptos::log!("value is {}", reader.get());
        if let Some(node) = input_node.get() {
            node.set_value(&reader.get().to_string());
        }
    });

    let input_listener = move |ev| {
        let target_value = event_target_value(&ev);

        if target_value == "" {
            setter(0);
        } else if target_value.parse::<i32>().unwrap() > max_value {
            setter(max_value)
        } else {
            setter(target_value.parse().unwrap());
        };

    };

    view! {cx,
        <input type="number"
            node_ref=input_node
            on:input=input_listener
        />
        "/ " {max_value}
    }
}

[lebenoa]

Hey! Thank you so much! I am extremely grateful for your help. It's working now!