Binding Values Into Closures

If you need to use some value in an event handler and at the same time somewhere else, it needs to be cloned into the event handler:

    use vertigo::{dom, Value};

    let val = Value::new("foobar".to_string());

    // Clone val into event handler
    let change_text = {
        let val = val.clone();
        move |_| val.set("new text".to_string())
    };

    // The original val can be used in rendering.
    dom! {
       <div>
          <p>{val}</p>
          <button on_click={change_text} />
       </div>
    }

More compact version is to use bind macro which hides cloning:

    use vertigo::{bind, dom, Value};

    let val = Value::new("foobar".to_string());

    let change_text = bind!(val, |_| val.set("new text".to_string()));

    dom! {
       <div>
          <p>{val}</p>
          <button on_click={change_text} />
       </div>
    }

Multiple values can be bound at once:

    use vertigo::{bind, dom, transaction, Value};

    let val1 = Value::new("foo".to_string());
    let val2 = Value::new("bar".to_string());

    struct MyTuple {
        pub val_a: Value<String>,
        pub val_b: Value<String>,
    }

    let tuple = MyTuple {
        val_a: Value::new("replace me".to_string()),
        val_b: Value::new("replace me too".to_string()),
    };

    let change_text = bind!(val1, val2, tuple.val_a, tuple.val_b, |_| transaction(
        |ctx| {
            val_a.set(val1.get(ctx));
            val_b.set(val2.get(ctx));
        }
    ));

    dom! {
         <p>"Val 1 = " {val1}</p>
         <p>"Val 2 = " {val2}</p>
         <p>"tuple = " {tuple.val_a} ", " {tuple.val_b}</p>
         <button on_click={change_text} />
    }