株式会社データファームのtakneoriです。
a-blog cmsのテンプレートで読み込む事が、(ほぼ)必須のacms.jsですが、
実行タイミングが非同期だったり、acms.js自体のドキュメントが少なかったりと、
けっこうややこしいです。。
一番、悩ましいのが
acms.js+組み込みJSを実行した後のタイミングに、処理を書きたい場合です。
現在(2016/09/06)のところ、公式には詳しいドキュメントはないようです。。
#しかし、じつはあった隠しイベントハンドラ!
ところが、じつはacms.jsには、そのような処理を設定できるイベントハンドラが存在していたようです。(!?)
a-blog cmsの公式フォーラムで、
私が得た情報・みつけた情報をここにまとめておきます。
acmsDispatchイベントハンドラ
acms.js+組み込みJSを実行した後に処理をしたい場合、
acmsDispatch
イベントハンドラに処理を追加します。
ACMS.addListener("acmsDispatch",function(){
$("[href*=bxslider]").remove();
});
引用元:組み込みJS(bxslider)のライブラリ依存CSSを読み込まないようにしたい - a-blog cms公式フォーラム
上記例では、
acms.jsが組み込みJSのために読み込んだbxslider.cssを、
linkタグごと消去しています。
acmsAddCustomFieldGroupイベント
カスタムフィールドグループを動的に追加した後に
処理をしたい場合は、acmsAddCustomFieldGroup
イベントハンドラに処理を追加します。
たとえば、下記画像のような場合です。
この場合、下記のソースのように、
フィールドを追加した後 js-datepicker
をもう一度実行する事で解決ができました。
ACMS.addListener("acmsAddCustomFieldGroup",function(item){
$(".js-datepicker").removeClass("hasDatepicker");
$(".js-datepicker").each(function(i){
var id = $(this).attr("id");
$(this).attr("id",id+i);
$(this).datepicker(ACMS.Config.dpicConfig);
});
});
引用元:(ver 2.6.0.2) カスタムフィールドグループに、動的にjs-datepickerを反映させるには - a-blog cms公式フォーラム
#おわりに
これで、かゆい所に手が届きますね!
現在、フォーラムを見る限り2つまでイベントハンドラが見つかっていますが、
他にもあるかもしれません。
公式ドキュメントの充実も期待したいですね。
また、acms.jsについては次期バージョンで、かなりの改善がされるとの噂ですので
個人的にはそちらにも期待したいです。
それでは!
(こちらの記事は、2016/09/06の情報です)