Struct router_xiaobei::prelude::builder::ElementBuilder

pub struct ElementBuilder<'a, Listeners, Attributes, Children> where
    Attributes: 'a + AsRef<[Attribute<'a>]>,
    Children: 'a + AsRef<[Node<'a>]>,
    Listeners: 'a + AsRef<[Listener<'a>]>,  { /* fields omitted */ }

A virtual DOM element builder.

Typically constructed with element-specific constructors, eg the div function for building <div> elements or the button function for building <button> elements.

Methods

impl<'a> ElementBuilder<'a, Vec<'a, Listener<'a>>, Vec<'a, Attribute<'a>>, Vec<'a, Node<'a>>>

pub fn new(
    bump: &'a Bump,
    tag_name: &'a str
) -> ElementBuilder<'a, Vec<'a, Listener<'a>>, Vec<'a, Attribute<'a>>, Vec<'a, Node<'a>>>

Create a new ElementBuilder for an element with the given tag name.

In general, only use this constructor if the tag is dynamic (i.e. you might build a <div> or you might build a <span> and you don't know until runtime). Prefer using the tag-specific constructors instead: div(bump) or span(bump), etc.

Example

use dodrio::{builder::*, bumpalo::Bump};

let b = Bump::new();

let tag_name = if flip_coin() {
    "div"
} else {
    "span"
};

let my_element_builder = ElementBuilder::new(&b, tag_name);

impl<'a, Listeners, Attributes, Children> ElementBuilder<'a, Listeners, Attributes, Children> where
    Attributes: 'a + AsRef<[Attribute<'a>]>,
    Children: 'a + AsRef<[Node<'a>]>,
    Listeners: 'a + AsRef<[Listener<'a>]>, 

pub fn listeners<L>(
    self,
    listeners: L
) -> ElementBuilder<'a, L, Attributes, Children> where
    L: 'a + AsRef<[Listener<'a>]>, 

Set the listeners for this element.

You can use this method to customize the backing storage for listeners, for example to use a fixed-size array instead of the default dynamically-sized bumpalo::collections::Vec.

Any listeners already added to the builder will be overridden.

Example

use dodrio::{builder::*, bumpalo::Bump};

let b = Bump::new();

// Create a `<div>` with a fixed-size array of two listeners.
let my_div = div(&b)
    .listeners([
        on(&b, "click", |root, vdom, event| {
            // ...
        }),
        on(&b, "dblclick", |root, vdom, event| {
            // ...
        }),
    ])
    .finish();

pub fn attributes<A>(
    self,
    attributes: A
) -> ElementBuilder<'a, Listeners, A, Children> where
    A: 'a + AsRef<[Attribute<'a>]>, 

Set the attributes for this element.

You can use this method to customize the backing storage for attributes, for example to use a fixed-size array instead of the default dynamically-sized bumpalo::collections::Vec.

Any attributes already added to the builder will be overridden.

Example

use dodrio::{builder::*, bumpalo::Bump, Attribute};

let b = Bump::new();

// Create a `<div>` with a fixed-size array of two attributes.
let my_div = div(&b)
    .attributes([
        attr("id", "my-div"),
        attr("class", "notification"),
    ])
    .finish();

pub fn children<C>(
    self,
    children: C
) -> ElementBuilder<'a, Listeners, Attributes, C> where
    C: 'a + AsRef<[Node<'a>]>, 

Set the children for this element.

You can use this method to customize the backing storage for children, for example to use a fixed-size array instead of the default dynamically-sized bumpalo::collections::Vec.

Any children already added to the builder will be overridden.

Example

use dodrio::{builder::*, bumpalo::Bump};

let b = Bump::new();

// Create a `<div>` with a fixed-size array of two `<span>` children.
let my_div = div(&b)
    .children([
        span(&b).finish(),
        span(&b).finish(),
    ])
    .finish();

pub fn finish(self) -> Node<'a>

Create the virtual DOM node described by this builder.

Example

use dodrio::{builder::*, bumpalo::Bump, Node};

let b = Bump::new();

// Start with a builder...
let builder: ElementBuilder<_, _, _> = div(&b);

// ...and finish it to create a virtual DOM node!
let my_div: Node = builder.finish();

impl<'a, Attributes, Children> ElementBuilder<'a, Vec<'a, Listener<'a>>, Attributes, Children> where
    Attributes: 'a + AsRef<[Attribute<'a>]>,
    Children: 'a + AsRef<[Node<'a>]>, 

pub fn on<F>(
    self,
    event: &'a str,
    callback: F
) -> ElementBuilder<'a, Vec<'a, Listener<'a>>, Attributes, Children> where
    F: 'static + Fn(&mut (dyn RootRender + 'static), VdomWeak, Event), 

Add a new event listener to this element.

The event string specifies which event will be listened for. The callback function is the function that will be invoked if the specified event occurs.

Example

use dodrio::{builder::*, bumpalo::Bump};

let b = Bump::new();

// A button that does something when clicked!
let my_button = button(&b)
    .on("click", |root, vdom, event| {
        // ...
    })
    .finish();

impl<'a, Listeners, Children> ElementBuilder<'a, Listeners, Vec<'a, Attribute<'a>>, Children> where
    Children: 'a + AsRef<[Node<'a>]>,
    Listeners: 'a + AsRef<[Listener<'a>]>, 

pub fn attr(
    self,
    name: &'a str,
    value: &'a str
) -> ElementBuilder<'a, Listeners, Vec<'a, Attribute<'a>>, Children>

Add a new attribute to this element.

Example

use dodrio::{builder::*, bumpalo::Bump};

let b = Bump::new();

// Create the `<div id="my-div"/>` element.
let my_div = div(&b).attr("id", "my-div").finish();

pub fn bool_attr(
    self,
    name: &'a str,
    should_add: bool
) -> ElementBuilder<'a, Listeners, Vec<'a, Attribute<'a>>, Children>

Conditionally add a "boolean-style" attribute to this element.

If the should_add parameter is true, then adds an attribute with the given name and an empty string value. If the should_add parameter is false, then the attribute is not added.

This method is useful for attributes whose semantics are defined by whether or not the attribute is present or not, and whose value is ignored. Example attributes like this include:

• checked
• hidden
• selected

Example

use dodrio::{builder::*, bumpalo::Bump};
use js_sys::Math;

let b = Bump::new();

// Create the `<div>` that is randomly hidden 50% of the time.
let my_div = div(&b)
    .bool_attr("hidden", Math::random() >= 0.5)
    .finish();

impl<'a, Listeners, Attributes> ElementBuilder<'a, Listeners, Attributes, Vec<'a, Node<'a>>> where
    Attributes: 'a + AsRef<[Attribute<'a>]>,
    Listeners: 'a + AsRef<[Listener<'a>]>, 

pub fn child(
    self,
    child: Node<'a>
) -> ElementBuilder<'a, Listeners, Attributes, Vec<'a, Node<'a>>>

Add a new child to this element.

Example

use dodrio::{builder::*, bumpalo::Bump};
use js_sys::Math;

let b = Bump::new();

// Create `<p><span></span></p>`.
let my_div = p(&b)
    .child(span(&b).finish())
    .finish();

Trait Implementations

impl<'a, Listeners, Attributes, Children> Clone for ElementBuilder<'a, Listeners, Attributes, Children> where
    Attributes: Clone + 'a + AsRef<[Attribute<'a>]>,
    Children: Clone + 'a + AsRef<[Node<'a>]>,
    Listeners: Clone + 'a + AsRef<[Listener<'a>]>, 

fn clone(&self) -> ElementBuilder<'a, Listeners, Attributes, Children>

Returns a copy of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<'a, Listeners, Attributes, Children> Debug for ElementBuilder<'a, Listeners, Attributes, Children> where
    Attributes: Debug + 'a + AsRef<[Attribute<'a>]>,
    Children: Debug + 'a + AsRef<[Node<'a>]>,
    Listeners: Debug + 'a + AsRef<[Listener<'a>]>, 

fn fmt(&self, f: &mut Formatter) -> Result<(), Error>

Formats the value using the given formatter.