如何在 OctoberCMS 的 Child Form 中将 JS 资产添加到 BackEnd formWidget？答案

【问题标题】：How do you add JS assets to a BackEnd formWidget in Child Form in OctoberCMS?如何在 OctoberCMS 的 Child Form 中将 JS 资产添加到 BackEnd formWidget？
【发布时间】：2017-05-11 10:08:16
【问题描述】：

我不确定我是否正确添加了我的 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 在页面加载时加载，而不是在小部件呈现时加载。这会产生以下问题：

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

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

当 formWidget 是子表单的一部分时，有没有办法让 addJS 方法适用于 formWidget？

【问题讨论】：

标签： octobercms-plugins october-form-controller octobercms-backend

【解决方案1】：

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

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

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

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

【讨论】：