[TYPO3-mvc] Including dynamic JavaScript using Tx_Fluid_View_StandaloneView [solution]

Michiel Roos [netcreators] michiel at netcreators.com
Sat Dec 11 20:40:45 CET 2010


Hi,

For a gallery extension that can be on a page N times, I needed to
include N JavaScript gallery configurations. It's also nice to have the
JS configurations seperated out of the code as templates. Certain key
values can then be configured through a flexform or TS.

The downside to this approach is that fluid has a hard time with braces
in templates. This is of course because JS also uses those braces a lot.

My solution is to replace all the { in the JS with: {openingBrace} and
all the } with {closingBrace}. And then all is fine

You can shorten those to {ob} and {cb} or whatever you like.

It won't win any beauty contests, but it works.

Here is some example code:
_______________________________________________

$class = md5(microtime());
$view = t3lib_div::makeInstance('Tx_Fluid_View_StandaloneView');

$view->setTemplatePathAndFilename(t3lib_extMgm::extPath('adgallery').'/Resources/Private/Templates/Gallery/JavaScript.html');

$view->setLayoutRootPath(t3lib_extMgm::extPath('adgallery').'/Resources/Private/Layouts/');
$view->assign('class', $class);
$view->assign('openingBrace', '{');
$view->assign('closingBrace', '}');
$view->assign('imageHeight', $this->settings['imageHeight']);
$view->assign('imageWidth', $this->settings['imageWidth']);

$this->response->addAdditionalHeaderData($view->render());

_______________________________________________

<f:layout name="default" />
<f:section name="content">
<script type="text/javascript">
$(document).ready(function(){openingBrace}
  $('.{class}').find('.ad-prev').mouseout(function(){openingBrace}
    $('#{class}ad-prev').hide();
    return false;
  {closingBrace});
  $('.{class}').find('.ad-prev').mouseenter(function(){openingBrace}
    $('#{class}ad-prev').show();
    return false;
  {closingBrace});
  $('.{class}').find('.ad-prev').mousemove(function(e){openingBrace}
    $('#{class}ad-prev').css('left', e.pageX - 20).css('top', e.pageY + 3);
  {closingBrace});
{closingBrace});
</script>
</f:section>


-- 
Met vriendelijke groet / Warm regards,

Michiel Roos
Chief Technical Officer
Netcreators: Open Source, Open Minds, Open People


More information about the TYPO3-project-typo3v4mvc mailing list