Каков правильный способ вставки JavaScript в шаблоны Twig

Я хочу показать голосование фильмов с выпадающим списком, который содержит JavaScript, но я не знаю, как правильно использовать JavaScript в шаблонах Twig. У меня есть query.dropdown.js и modernizr.custom.63321.js в ...\PYSBundle\Resources\public\js. В base.html.twig я получил:Каков правильный способ вставки JavaScript в шаблоны Twig

 (...) 
     <script src="js/modernizr.custom.63321.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery.dropdown.js"></script> 
     <script type="text/javascript"> 
      $(function() 
      { 
       $('#cd-dropdown').dropdown(); 
      }); 
     </script> 
    </body> 
</html>

В frontend.html.twig, которая простирается от base.html.twig я получил:

{% block javascripts %} 
    {% javascripts '@PYSBundle/Resources/public/js/jquery.dropdown.js' %} 
     <script src="{{ asset_url }}" type="text/javascript"></script> 
    {% endjavascripts %} 

    {% javascripts '@PYSBundle/Resources/public/js/modernizr.custom.63321.js' %} 
     <script src="{{ asset_url }}"></script> 
    {% endjavascripts %} 
{% endblock %}

На наконец, в votaciones.html.twig, которая простирается от fronted.html.twig` я получил:

<select id="cd-dropdown" class="cd-select"> 
    <option value="-1" selected>Select a vote -</option> 
    <option value="1" class="one">1</option> 
    <option value="2" class="two">2</option> 
    <option value="3" class="three">3</option> 
    <option value="4" class="four">4</option> 
    <option value="5" class="five">5</option> 
    <option value="6" class="six">6</option> 
    <option value="7" class="seven">7</option> 
    <option value="8" class="eight">8</option> 
    <option value="9" class="nine">9</option> 
    <option value="10" class="ten">10</option> 
</select>

источник

2013-06-28 Anonymous

Вот как я делаю эту вещь

Во-первых, определить библиотеки вы используете все время в этом приложении и поместить их в папку app/Resources/public/js/

приложения/Ресурсы/государственные/JS/

jquery.min.js
jquery.dropdown.js
modernizr.js

Затем создайте assetic.asset за ними легко

config.yml

assetic: 
    assets: 
     libraries: 
      inputs: 
       - '%kernel.root_dir%/Resources/public/js/jquery.min.js' 
       - '%kernel.root_dir%/Resources/public/js/jquery.dropdown.js' 
       - '%kernel.root_dir%/Resources/public/js/modernizr.js'

Затем создайте один JS файл, который будет содержать ваш Javascript расслоение логики

@ Bundle/Ресурсы/государственные/js/frontbundle.js

(function(window, document, $, undefined) { 

// Define the routes to deffer execution of javascript 
// "all" matches all the pages 
// "bodyId" defines the ID of the body 
var Routes = { 
    'all': [ 'hello' ], 
    'bodyId': [ 'foo' ] 
} 

var Mods = { 
    hello: function() { 
     console.log('Hello world'); 
    }, 

    foo: function() { 
     console.log('Foobar'); 
    } 
} 

function frontbundle() { 
    this.bodyId = document.getElementsByTagName("body")[0].getAttribute('id'); 
} 

frontbundle.prototype = { 
    init: function() { 
     this.run('all'); 
     this.run(this.bodyId); 
    }, 
    run: function(id) { 
     var route = Routes[id]; 

     if (undefined === route) { 
      return; 
     } 

     for (var i = 0; i < route.length; i++) { 
      Mods[route[i]](); 
     } 
    } 
} 

$(document).ready(function() { 
    var app = new frontbundle; 
    app.init(); 
}) 

})(window, document, jQuery)

То, как я сделал, чтобы уменьшить выполнение javascript, необходимо установить id на <body> каждой страницы.

Тогда просто импортировать их все в вашей базе шаблона

@ Bundle/Ресурсы/просмотров/base.html.twig

{% javascripts 
    '@libraries' 
    '@Bundle/Resources/public/js/frontbundle.js' 
    filter='yui_js' 
%} 
    <script type="text/javascript" src="{{ asset_url }}"></script> 
{% endjavascripts %}

источник

2013-06-28 15:41:30 Touki

Одиночные JS файл, который вы говорите, это мой 'jquery.dropdown.js'. Исходя из этого, я выполнил ваши инструкции, но я все еще не работаю –

Я решил, поставив эти строки: ' ' –

Каков правильный способ вставки JavaScript в шаблоны Twig

ответ

Смежные вопросы