Hi Johannes,
I'm following these doc:
http://jmsyst.com/libs/twig.js
http://jmsyst.com/bundles/JMSTwigJsBundle
and understood the use of assetic variable from this doc:
http://jmsyst.com/blog/asset-variables-in-assetic
and added twig.js into my symfony project. (symfony: 2.1.6)
-
I've added dependencies of twig.js and TwigJsBundle into composer.json:
"require": {
"php": ">=5.3.3",
"symfony/symfony": "2.1.",
"doctrine/orm": ">=2.2.3,<2.4-dev",
"doctrine/doctrine-bundle": "1.0.",
"twig/extensions": "1.0.@dev",
"symfony/assetic-bundle": "2.1.",
"symfony/swiftmailer-bundle": "2.1.",
"symfony/monolog-bundle": "2.1.",
"sensio/distribution-bundle": "2.1.",
"sensio/framework-extra-bundle": "2.1.",
"sensio/generator-bundle": "2.1.",
"jms/security-extra-bundle": "1.2.",
"jms/di-extra-bundle": "1.1.",
"bcc/extra-tools-bundle": "dev-master",
"kriswallsmith/assetic": "1.1.@dev",
"friendsofsymfony/jsrouting-bundle": "1.0.*",
"jms/twig-js": "dev-master",
"jms/twig-js-bundle": "dev-master"
-
composer.phar update
-
Register the bundle in AppKernel:
$bundles = array(
new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
new Symfony\Bundle\SecurityBundle\SecurityBundle(),
new Symfony\Bundle\TwigBundle\TwigBundle(),
new Symfony\Bundle\MonologBundle\MonologBundle(),
new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
new Symfony\Bundle\AsseticBundle\AsseticBundle(),
new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
new JMS\AopBundle\JMSAopBundle(),
new JMS\DiExtraBundle\JMSDiExtraBundle($this),
new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
new JMS\TwigJsBundle\JMSTwigJsBundle(),
-
In app/config/config.yml, I've added the "locale" variable:
assetic:
variables:
locale: [en_US, zh_CN, zh_HK, zh_TW]
debug: "%kernel.debug%"
use_controller: false
-
In my layout.html.twig, I write this piece of assetic:
{% javascripts "@KuulabuKuulabuBundle/Resources/views/User/userDiv.html.twig"
vars=["locale"]
filter="twig_js" %}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
-
This is all content of my userDiv.twig.html:
{% twig_js name="User_userDiv" %}
{#
INPUTS:
--------
* user (object of User) OR null
* email (for non-registered user) OR null
* showRemoveButton (true/false), default:false
* showEmail (true/false), default:false
* hasHoverEffect (true/false), default:false
}
{% if user != null %}{# registered users #}
{%set name = user.name%}
{%set userProfileUrl = path('_user_profile_page',{'userId':user.userId})%}
{%set userProfilePhotoUrl = user.getProfilePhotoUrl(usr_url_prefix)%}
{% else %}{# non-registered users #}
{%set name = email%}
{%set userProfileUrl = 'javascript:void(0);'%}
{%set userProfilePhotoUrl = usr_url_prefix ~ '/no-portrait-male'%}
{% endif %}
<div name="userDiv" class="userDiv {{(hasHoverEffect is defined and hasHoverEffect == true)?'hasHover':''}}">
<input type="hidden" name="userId" value="" />{# registered user #}
<input type="hidden" name="email" value="" />{# non-registered user #}
{%if showRemoveButton is defined and showRemoveButton == true %}
<button title="{%trans%}remove{%endtrans%}" class="crossButton" name="removeButton"></button>
{%endif%}
<a class="photoBox" href="{{userProfileUrl}}">
<img src="{{userProfilePhotoUrl}}" />
</a>
<div class="info">
<p class="name" title="{{name}}"><a href="{{userProfileUrl}}">{{name}}</a></p>
{%if user == null or ( showEmail is defined and showEmail == true ) %}
<p class="email" title="{{email}}"><{{email}}></p>
{%endif%}
</div>
</div>
Unfortunately, I got exception:
An exception has been thrown during the rendering of a template ("The "_assetic_2d8b270_0" route has some missing mandatory parameters ("locale").") in "KuulabuKuulabuBundle:Public:signinPage.html.twig".
500 Internal Server Error - Twig_Error_Runtime
1 linked Exception:
MissingMandatoryParametersException »
I confirmed that the "_assetic_2d8b270_0" mentioned above is such a path when I look for it in the symfony2 profiler:
Route name: _assetic_2d8b270_0
Pattern: /js/2d8b270_userDiv.html_1.{locale}.js
Log: Pattern "/js/2d8b270_userDiv.html_1.{locale}.js" does not match
Could you pls give me some clue? Thank you.
btw, before adding the var=[] and the assetic variables, the exception told me that "There is no compiler for node type Symfony\Bridge\Twig\Node\TransNode". I wonder why this is the error as I already seen a Trans compiler inside the JMSTwigJsBundle.
P.S.: the doc for TwigJsBundle seems to be a bit old. Even no doc about adding the dependencies into composer.json. If you have time, updating would also be appreciated.
I couldn't find the place to "registerNamespace" in symfony2.1 so I've skipped it, would this be the cause of the error?
Simon
Hi Johannes,
I'm following these doc:
http://jmsyst.com/libs/twig.js
http://jmsyst.com/bundles/JMSTwigJsBundle
and understood the use of assetic variable from this doc:
http://jmsyst.com/blog/asset-variables-in-assetic
and added twig.js into my symfony project. (symfony: 2.1.6)
I've added dependencies of twig.js and TwigJsBundle into composer.json:
"require": {
"php": ">=5.3.3",
"symfony/symfony": "2.1.",
"doctrine/orm": ">=2.2.3,<2.4-dev",
"doctrine/doctrine-bundle": "1.0.",
"twig/extensions": "1.0.@dev",
"symfony/assetic-bundle": "2.1.",
"symfony/swiftmailer-bundle": "2.1.",
"symfony/monolog-bundle": "2.1.",
"sensio/distribution-bundle": "2.1.",
"sensio/framework-extra-bundle": "2.1.",
"sensio/generator-bundle": "2.1.",
"jms/security-extra-bundle": "1.2.",
"jms/di-extra-bundle": "1.1.",
"bcc/extra-tools-bundle": "dev-master",
"kriswallsmith/assetic": "1.1.@dev",
"friendsofsymfony/jsrouting-bundle": "1.0.*",
"jms/twig-js": "dev-master",
"jms/twig-js-bundle": "dev-master"
composer.phar update
Register the bundle in AppKernel:
$bundles = array(
new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
new Symfony\Bundle\SecurityBundle\SecurityBundle(),
new Symfony\Bundle\TwigBundle\TwigBundle(),
new Symfony\Bundle\MonologBundle\MonologBundle(),
new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
new Symfony\Bundle\AsseticBundle\AsseticBundle(),
new Doctrine\Bundle\DoctrineBundle\DoctrineBundle(),
new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
new JMS\AopBundle\JMSAopBundle(),
new JMS\DiExtraBundle\JMSDiExtraBundle($this),
new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
new JMS\TwigJsBundle\JMSTwigJsBundle(),
In app/config/config.yml, I've added the "locale" variable:
assetic:
variables:
locale: [en_US, zh_CN, zh_HK, zh_TW]
debug: "%kernel.debug%"
use_controller: false
In my layout.html.twig, I write this piece of assetic:
{% javascripts "@KuulabuKuulabuBundle/Resources/views/User/userDiv.html.twig"
vars=["locale"]
filter="twig_js" %}
<script language="javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
This is all content of my userDiv.twig.html:
{% twig_js name="User_userDiv" %}
{#
INPUTS:
--------
* user (object of User) OR null
* email (for non-registered user) OR null
* showRemoveButton (true/false), default:false
* showEmail (true/false), default:false
* hasHoverEffect (true/false), default:false
}
{% if user != null %}{# registered users #}
{%set name = user.name%}
{%set userProfileUrl = path('_user_profile_page',{'userId':user.userId})%}
{%set userProfilePhotoUrl = user.getProfilePhotoUrl(usr_url_prefix)%}
{% else %}{# non-registered users #}
{%set name = email%}
{%set userProfileUrl = 'javascript:void(0);'%}
{%set userProfilePhotoUrl = usr_url_prefix ~ '/no-portrait-male'%}
{% endif %}
<div name="userDiv" class="userDiv {{(hasHoverEffect is defined and hasHoverEffect == true)?'hasHover':''}}">
<input type="hidden" name="userId" value="" />{# registered user #}
<input type="hidden" name="email" value="" />{# non-registered user #}
{%if showRemoveButton is defined and showRemoveButton == true %}
<button title="{%trans%}remove{%endtrans%}" class="crossButton" name="removeButton"></button>
{%endif%}
<a class="photoBox" href="{{userProfileUrl}}">
<img src="{{userProfilePhotoUrl}}" />
</a>
<div class="info">
<p class="name" title="{{name}}"><a href="{{userProfileUrl}}">{{name}}</a></p>
{%if user == null or ( showEmail is defined and showEmail == true ) %}
<p class="email" title="{{email}}"><{{email}}></p>
{%endif%}
</div>
</div>
Unfortunately, I got exception:
An exception has been thrown during the rendering of a template ("The "_assetic_2d8b270_0" route has some missing mandatory parameters ("locale").") in "KuulabuKuulabuBundle:Public:signinPage.html.twig".
500 Internal Server Error - Twig_Error_Runtime
1 linked Exception:
MissingMandatoryParametersException »
I confirmed that the "_assetic_2d8b270_0" mentioned above is such a path when I look for it in the symfony2 profiler:
Route name: _assetic_2d8b270_0
Pattern: /js/2d8b270_userDiv.html_1.{locale}.js
Log: Pattern "/js/2d8b270_userDiv.html_1.{locale}.js" does not match
Could you pls give me some clue? Thank you.
btw, before adding the var=[] and the assetic variables, the exception told me that "There is no compiler for node type Symfony\Bridge\Twig\Node\TransNode". I wonder why this is the error as I already seen a Trans compiler inside the JMSTwigJsBundle.
P.S.: the doc for TwigJsBundle seems to be a bit old. Even no doc about adding the dependencies into composer.json. If you have time, updating would also be appreciated.
I couldn't find the place to "registerNamespace" in symfony2.1 so I've skipped it, would this be the cause of the error?
Simon