Question

我想用包含JavaScript的下拉列表显示电影投票，但我不知道在Twig模板中使用JavaScript的正确方法是什么。我在query.dropdown.js中有modernizr.custom.63321.js和...\PYSBundle\Resources\public\js。在base.html.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

最后在<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>扩展了fronted.html.twig`我得到了：

{{1}}

Answer 1

这就是我做这件事的方式

首先，定义您在此应用程序中始终使用的库，并将它们放在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'

然后，创建一个将保存javascript包逻辑的单个js文件

的 @捆绑/资源/公共/ 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>。

然后，只需在基本模板中导入所有这些

的 @捆绑/资源/视图/ base.html.twig

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

Answer 2

请确保您需要以下资源：作曲家需要symfony / asset

这当然是在使用symfony。

<script src="{{ asset('js/functions.js') }}"></script>

在Twig模板中插入JavaScript的正确方法是什么

2 个答案: