2012-09-24 8 views
13

Что мне нужно сделать, чтобы получить ветку для обработки файла JavaScript? У меня есть html.twig, который использует ветку JavaScript. Что-то вроде этого:Symfony2, twig и JavaScript

{% extends 'BaseBundle::layout.html.twig' %} 

{% block javascripts %} 
    {{ parent() }} 
    {% javascripts 
     '@BaseBundle/Resources/js/main.js.twig' 
    %} 
    {% endjavascripts %} 
{% endblock %} 

< more template omitted > 

И части main.js.twig:

function testFunction() 
{ 
    alert('{{VariableFromPHP}}'); 
} 

И контроллер:

/** 
* @Route("/",name="home") 
* @Template("MyBundle:Default:index.html.twig") 
*/ 
public function indexAction() 
{ 
    return array('VariableFromPHP' => 'Hello World'); 
} 

Я ожидал JavaScript, чтобы выглядеть во время выполнения :

alert('Hello World'); 

Но, e код не изменяется. Любые идеи, что я делаю неправильно?

Спасибо, Скотт

ответ

12

Assetic не включает в себя шаблоны хворостины; вы должны создать отдельный контроллер для файла javascript. Хотя я считаю это плохой практикой, так как вам придется обрабатывать два запроса таким образом.

/** 
* @Route("/main.js") 
*/ 
public function mainJsAction() { 
    $params = array('test' => 'ok'); 
    $rendered = $this->renderView('MyBundle:Default:main.js.twig', $params); 
    $response = new \Symfony\Component\HttpFoundation\Response($rendered); 
    $response->headers->set('Content-Type', 'text/javascript'); 
    return $response; 
} 
{% extends 'BaseBundle::layout.html.twig' %} 

{% block javascripts %} 
    {{ parent() }} 
    <script type="text/javascript" src="{{ path('my_default_mainjs') }}"></script> 
{% endblock %} 

Альтернативой является свалка динамических переменных в HTML, и использовать только статические JavaScript файлы.

1

Вместо того, что я сделал это в main.js:

function doGetStringFromSubClass() 
{ 
    if (typeof getStringFromSubClass == 'function') 
    { 
     return getStringFromSubClass(); 
    } 
    else 
    { 
     alert('getStringFromSubClass() needs to be defined.') 
    } 
} 

function testFunction() 
{ 
    alert(doGetStringFromSubClass()); 
} 

и, в подклассе сучьев, у нас есть этот main.js:

function getStringFromSubClass(){ 
    return "baseClassString"; 
    } 

И эта веточка:

{% extends 'BaseBundle:Default:index.html.twig' %} 

{% block javascripts %} 
    {{ parent() }} 

    {% javascripts 
     '@SomeSubclassBundle/Resources/js/main.js' 
    %} 

    <script type="text/javascript" src="{{ asset_url }}"></script> 
    {% endjavascripts %} 
{% endblock %} 

Kinda goofy, но, он работает.

Скотт

17

Мое предложение приемлемо использовать глобальные переменные:

{% javascripts '@AcmeBundle/Resources/public/js/*' output='js/compiled/main.js'%} 
     <script> 
      var TWIG = {}; 
      TWIG.variableOne = "{{ path('rote_to_nowhere') }}"; 
      TWIG.variableTwo = "{{ helloworldVar }}"; 
      TWIG.variableThree = "{{ "something"|trans }}"; 
     </script> 
     <script type="text/javascript" src="{{ asset_url }}"></script> 
{% endjavascripts %} 

, то вы можете использовать его в js файле:

alert(TWIG.variableTwo); 
+0

Это идеальное решение для того, что мне нужно, маршруты, созданные для использования в запросах ajax. –

+3

Возможно использование 'var TWIG = TWIG || {}; ', особенно если вы планируете использовать это дважды. – jeroenvisser101

+0

@LaytonEverson [FosJsRoutingBundle] (https://github.com/FriendsOfSymfony/FOSJsRoutingBundle) может помочь вам с этим – MauganRa

-1

я хочу использовать

<!DOCTYPE html> 
<html> 
<body> 

<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p> 

Enter your name: <input type="text" id="fname" onkeyup="myFunction()"> 

<p>My name is: <span id="demo"></span></p> 

<script> 
function myFunction() { 
    var x = document.getElementById("fname").value; 
    document.getElementById("demo").innerHTML = x; 
} 
</script> 

</body> 
</html> 

в TWI G

+0

Ответит ли это? –

+0

Это не ответ. Это просто заявление, которое может быть или не быть его собственным вопросом. – innerurge1