Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Html from String #1160

Closed
PG-kura opened this issue Apr 28, 2020 · 2 comments
Closed

Html from String #1160

PG-kura opened this issue Apr 28, 2020 · 2 comments
Labels

Comments

@PG-kura
Copy link

PG-kura commented Apr 28, 2020

I'm sorry if the question is already there.

html! macro is great. But is there any way to create yew::html::Html from String?
I want to return an SVG from view() function, but the SVG was given as String from other crate.

@ZainlessBrombie
Copy link
Collaborator

ZainlessBrombie commented Apr 28, 2020

Since you are sure your svg is safe (make sure it really is) you could set innerHtml via a noderef.
This would, of course, interact with the diffing algorithm (which makes sure the DOM html corresponds to the one yew has internally) so you should make sure view() is called only once (by returning false from change() and update() )
How you would do this exactly depends on whether you are using web-sys or stdweb

@PG-kura
Copy link
Author

PG-kura commented Apr 29, 2020

Thanks for your reply. It got work!

Here is implementation of view() funtion I wrote. (Using web_sys).

  fn view(&self) -> Html {
    web_sys::window()
      .and_then(|window| window.document())
      .map_or_else(
        || {
          html! { <p>{ "Failed to resolve `document`." }</p> }
        },
        |document| match document.create_element("div") {
          Ok(div) => {
            div.set_inner_html(
              r#"
              <svg width="600" height="100" viewBox="0 0 600 100">
                <circle cx="100" cy="50" r="50" fill="red">
              </svg>
            "#,
            );
            yew::virtual_dom::VNode::VRef(div.into())
          }
          Err(e) => html! { <p>{ format!("{:?}", &e) }</p> },
        },
      )
  }

@PG-kura PG-kura closed this as completed Apr 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants