How to pass function parameter form Widget to jQuery

While I using fancybox, I encounter a problem of passing function parameter form Widget to jQuery will not work with CJavaScript::encode().

This is javascript approach of passing parameters to a jQuery plugin, here we can directory passing function as parameter.




<script type="text/javascript">

$("a[rel=example_group]").fancybox({

	'transitionIn'		: 'none',

	'transitionOut'		: 'none',

	'titlePosition' 	: 'over',

	'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {

		return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';

	}

});

</script>



When we write widget, we may wrap these JS code into as following code.

In run method, CJavaScript::encode() will 'Encodes a PHP variable into javascript representation.




class EFancyBox extends CWidget

{

    ...

    public function run()

    {

        $config = CJavaScript::encode($this->config);

        Yii::app()->clientScript->registerScript($this->getId(),"$('$this->target').fancybox($config);",CClientScript::POS_READY);		

    }

    ...

}



This is how I using the widget, notice that a passed a function in the array key/value pair.

And the function here will not be property encode to JavaScript variable.




<?php

$this->widget('application.widgets.EFancyBox', array(

	'target'=>"a[rel=example_group]",

	'config'=>array(

		'transitionIn'=>'none',

		'transitionOut'=>'none',

		'titlePosition'=>'over',

		'titleFormat'=>function($title, $currentArray, $currentIndex, $currentOpts){

			return '<span id="fancybox-title-over">Image ' + ($currentIndex + 1) + ' / ' + $currentArray.length + ($title.length ? ' &nbsp; ' + $title : '') + '</span>';

		}

	)

));

?>



The above ‘config array’ will be pass to CJavaScript::encode() and below is the output.




{'transitionIn':'none','transitionOut':'none','titlePosition':'over','titleFormat':[]}



And what I expect shall be as follow.




{'transitionIn':'none','transitionOut':'none','titlePosition':'over','titleFormat':function(title, currentArray, currentIndex, currentOpts) {

		return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';

	}}



So, how shall I pass a function parameter in a widget config array~

With many many thanks for your help!

try :




'titleFormat'           : 'js:function(title, currentArray, currentIndex, currentOpts){ ....} ',



Yes, Got it~

With a great appreciate !