0

我不确定我是否正确添加了我的 JS 资产，如果不是，我希望得到一些建议。

在 octoberCMS 中，我创建了一个使用 Google Maps API 的自定义 formWidget。

我在一个子表单中使用我的 formWidget，该子表单在需要时通过 AJaX 作为模式呈现。

如果我在我的小部件类中使用以下代码：

public function loadAssets(){
    $this->addJs("http://maps.googleapis.com/maps/api/js?key=myappkeyhere&libraries=places");
    $this->addJs('js/geocomplete/jquery.geocomplete.min.js');
    $this->addJs('js/addressinput.js');
    $this->addCss('css/addressinput.css');
}

JS 在页面加载时加载，而不是在小部件呈现时加载。这会产生以下问题：

  1. google-maps API 返回一个错误，指出它已被多次加载。
  2. 与子元素中的 DOM 元素相关的事件失败，因为在调用表单之前元素不在 DOM 中。

我正在使用的解决方法是将我的 JS 嵌入到 formWidget 部分中。

当它是子表单的一部分时，有没有办法让 addJS 方法对 formWidget 起作用？

4

1 回答 1

2

经过一番调查，我意识到我的 formWidget 使用addJs()方法可以使小部件 JS 在整个页面全局可用，甚至在 formWidget 存在或什至需要之前。

虽然我本可以创建一个精致的、花哨的 JS，其中涉及 DOM 插入的侦听器和等等等等，但这并不理想（主要是因为小部件属性会根据实现而改变）。

包含紧密绑定到复杂 formWidget 的 JS 的最快/最安全的方法是将其包含在部分中。这可确保表单小部件在独立表单中以及在小部件是通过 Ajax 加载创建的子表单的一部分的情况下都能正常工作。

（如果您知道更好的方法，请告诉我）

于 2016-12-30T15:35:54.600 回答