3

我正在使用 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: JsValue);
}

pub unsafe fn init_sidenav(el: &str, options: &str) {
    Sidenav::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) };

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

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

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

老实说，我不明白为什么会这样。几天来，我一直在 MDN 文档中寻找有关 WASM 和 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
|-...
...
4

0 回答 0