Что мне нужно сделать, чтобы получить ветку для обработки файла JavaScript? У меня есть html.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');
Но код не изменился. Любые идеи, что я делаю неправильно?
Спасибо, Скотт
Ассистент не включает шаблоны ветви; вы должны создать отдельный контроллер для файла 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.
Мое предложение использовать глобальные переменные:
{% 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);
Вместо этого я сделал это в 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 %}
Скудно, но это работает.
Скотт
я хочу использовать
<!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>
в TWIG