Question

我不确定我是否正确添加了我的JS资产，如果不是，我想要一些建议。

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

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

如果我在widget类中使用以下代码：

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使用Page load加载，而不是在呈现窗口小部件时加载。这会产生以下问题：

google-maps API会返回错误消息，说明已多次加载。
绑定到子节点中DOM元素的事件失败，因为在调用表单之前元素不在DOM中。

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

当formWidget是子窗体的一部分时，是否有办法使addJS方法适用于formWidget？

Answer 1

经过一番调查后，我意识到使用 addJs（）方法的formWidget会使窗口小部件JS全局可用于整个页面，甚至在formWidget存在之前甚至是需要之前。

虽然我本可以创建一个精心设计，花哨的JS涉及DOM插入的侦听器和 blah blah blah blah ，但这并不理想（主要是因为小部件属性根据实施情况进行变更）。

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

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

如何将JS资产添加到OctoberCMS中的子窗体中的BackEnd formWidget？

1 个答案: