5

我想用包含 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.twigfronted.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>
4

2 回答 2

4

Here's the way I do this thing

First, define the libraries you use all the time in this application and put them in app/Resources/public/js/ folder

app/Resources/public/js/

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

Then, create an assetic.asset to fetch them easily

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'

Then, create a single js file which will hold your javascript bundle logic

@Bundle/Resources/public/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)

The way I did to deffer execution of javascript needs to set an id to the <body> of each page.

Then, just import all of them in your base template

@Bundle/Resources/views/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-28T15:41:30.970 回答
0

通过以下方式确保您需要资产：composer require symfony/asset

这是如果你当然使用 symfony 的话。

<script src="{{ asset('js/functions.js') }}"></script>
于 2020-11-25T10:43:39.640 回答