コントローラーから jQuery または JavaScript に流動変数を渡すにはどうすればよいでしょうか?
私のコントローラー内:
public function tabs () {
$this->view->assign('tab', 1);
}
fluid 内では変数を {tab} として使用しますが、どうすれば JavaScript に渡すことができますか? どんな助けでも大歓迎です...
私は通常、これに data-Attributes を使用します。したがって、Fluid には次のようなものがあります。
<div data-tab="{tab}"></div>
JavaScript では、次の方法でこの属性にアクセスします。
jQuery('div').data('tab');
もちろん、これには任意の HTML 要素を使用できます。
f:for のような Fluid タグが必要な場合は、CDATA を使用できます (Fluid 変数も機能します)。例えば
<script type="text/javascript"><![CDATA[
function initialize() {
var marker = [];
var LatLng;
var queryLatlng = new google.maps.LatLng(]]>{queryLat}, {queryLng}<![CDATA[);
var mapOptions = {
center: queryLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("tx_gmapplus-map"),mapOptions);
marker['0'] = new google.maps.Marker({
position: queryLatlng,
map: map,
title: "Standort"
});
]]><f:for each="{addresses}" as="address" iteration="it"><![CDATA[
latlng = new google.maps.LatLng(]]>{address.txGmapplusLatitude}, {address.txGmapplusLongitude}<![CDATA[);
]]>marker['{it.cycle}']<![CDATA[ = new google.maps.Marker({
position: latlng,
map: map,
title: ]]>"{address.name}"<![CDATA[
});
]]></f:for><![CDATA[
}
]]></script>
書くのはあまり快適ではありませんが、機能しており、Fluid ロジックの利点があります。
流動的なテンプレートでの JS の動作は... ほとんどの場合ひどいものです。JS コードに中かっこが含まれている場合は、スクリプトをビューに配置する代わりに、外部スクリプトを含める必要があります。
その理由は、すべての中括弧がそのスコープに属していると Fluid が考えるためです。したがって、次のように記述します。
$('#mySelectBox').change(function() {
// functions body code
// next line
// next line
});
Fluid は JS を破棄し、次のようにレンダリングします。
$('#mySelectBox').change(function() Array);
次に、ほとんどの場合、次のようなものを使用します。
ビューで:
<script>var TxMyExtKeyTabNumber = {tab}</script>
<script src="path/to/static/script.js"></script>
script.js で:
$("#container").val(TxMyExtKeyTabNumber);
良くはありませんが (ただし、CDATA のものよりも醜くはありません)、javaScript でタグ表記流体を直接使用することは可能です。{ } ブラケットの外側では、もちろん fluid 変数に直接アクセスできます。角かっこ内では、fluid 変数を任意の fluid タグでラップできます。
したがって、以下のすべての例が機能します...
<script>
var myGlobal = {fluidVar};
function myFunc(){
var myLocal = <f:format.raw>{fluidVar2}</f:format.raw>
var myLocal2 = <f:if condition="1">{fluidVar3}</f:if>
}
</script>