如何使用 wasm-bindgen 在 Rust 上正确执行 js 代码

问题描述

我正在使用 Rust、WASM 和 yew 作为前端框架。我正在围绕 materialize-css 构建一个包装器，以便在 yew 上使用它作为可重用组件的依赖项。

要使用一些 materialize-css 组件，需要对其进行初始化。例如，使用 sidenav

  document.addEventListener('DOMContentLoaded',function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems,options);
  });

问题是我试图按照 wasm-bindgen 文档中的描述使用 wasm-bindgen 运行它，但它不起作用。或者也许我真的不明白发生了什么。

根据文档，这应该有效：

#[wasm_bindgen( module = "/materialize/js/bin/materialize.js",js_namespace = ["M","Sidenav"] )]
extern "C" {
  fn init(el: JsValue,options: JsValue);
}

pub unsafe fn init_sidenav(el: &str,options: &str) {
    init(
        JsValue::from(document().get_element_by_id(el).expect("not found")),JsValue::from(options),);
}

//to use it on yew component
unsafe { materialize::sidenav::init_sidenav(self.props.el_id,&options) };

或者这个：

#[wasm_bindgen( module = "/materialize/js/bin/materialize.js",js_namespace = M )]
extern "C" {
  #[wasm_bindgen]
  type Sidenav;

  #[wasm_bindgen( static_method_of = Sidenav )]
  fn init(el: JsValue,options: &str) {
    Sidenav::init(
        JsValue::from(document().get_element_by_id(el).expect("not found")),&options) };

但它们都不起作用......在这两种情况下，代码编译都没有问题，但在浏览器中执行时，它会跳转错误。

在第一种情况下，错误是 Uncaught SyntaxError: import not found: init lib.js:1:9

在第二种情况下，错误是 Uncaught SyntaxError: import not found: Sidenav lib.js:1:9

老实说，我不明白为什么会发生这种情况。我一直在寻找有关 WASM 的 MDN 文档和 wasm_bindgen 文档的信息，但我找不到任何对我有帮助的信息。

另外

我正在使用 --target 网络标志

我的项目结构

-
|Cargo.toml
|materialize/ (source of materialize-css dist)
|src/
|-components/ (wrappings of components on yew)
|-materialize/ (wasm-bindgen bindings of materialize)
|-lib.rs
|-...
...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）