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

时间:2016-12-27 05:59:19

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

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

  1. google-maps API会返回错误消息,说明已多次加载。
  2. 绑定到子节点中DOM元素的事件失败,因为在调用表单之前元素不在DOM中。
  3. 我使用的解决方法是将我的JS嵌入到formWidget部分中。

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

1 个答案:

答案 0 :(得分:2)

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

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

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

(如果你知道更好的方法,请告诉我)