2012-09-24 31 views
13

Tôi cần làm gì để có được quy trình xử lý tệp JavaScript? Tôi có một html.twig sử dụng một cành cây JavaScript. Một cái gì đó như thế này:Symfony2, twig và JavaScript

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

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

< more template omitted > 

Và bộ phận của main.js.twig:

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

Và bộ điều khiển:

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

tôi mong đợi các hoạt Javascript để trông như thế này tại thời gian chạy :

alert('Hello World'); 

Nhưng, thứ mã e không thay đổi. Bất kỳ ý tưởng những gì tôi đang làm sai?

Xin cảm ơn, Scott

Trả lời

12

Nội dung không bao gồm mẫu ghép; bạn nên tạo một bộ điều khiển riêng cho tệp javascript. Mặc dù tôi sẽ xem xét nó thực hành xấu-khôn ngoan, bởi vì bạn sẽ phải xử lý hai yêu cầu theo cách này.

/** 
* @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 %} 

Một cách khác là để đổ biến động trong html, và chỉ sử dụng các tập tin javascript tĩnh.

1

Thay vào đó, những gì tôi đã làm điều này là trong main.js:

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

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

và trong các cành cây phân lớp, chúng tôi có điều này main.js:

function getStringFromSubClass(){ 
    return "baseClassString"; 
    } 

Và cành lá này:

{% 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, nhưng, nó hoạt động.

Scott

17

Sugestion của tôi sử dụng các biến toàn cầu:

{% 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 %} 

sau đó bạn có thể sử dụng nó trong js tập tin của bạn:

alert(TWIG.variableTwo); 
+0

Điều này là hoàn hảo cho những gì tôi cần, các tuyến được tạo để sử dụng trong truy vấn ajax. –

+3

Có thể sử dụng 'var TWIG = TWIG || {}; ', đặc biệt khi bạn dự định sử dụng điều này hai lần. – jeroenvisser101

+0

@LaytonEverson [FosJsRoutingBundle] (https://github.com/FriendsOfSymfony/FOSJsRoutingBundle) có thể giúp bạn với điều đó – MauganRa

-1

tôi muốn sử dụng

<!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> 

trong TWI G

+0

Đây có phải là câu trả lời không? –

+0

Đây không phải là câu trả lời. Nó chỉ là một tuyên bố rằng có thể hoặc có thể không phải là câu hỏi riêng của nó. – innerurge1

Các vấn đề liên quan