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

What is the correct way to insert JavaScript in Twig templates

提问by Touki

I want to display the vote of films with drop down list which contains JavaScript, but I' don't know what is the correct way to use JavaScript in Twig templates. I've got query.dropdown.jsand modernizr.custom.63321.jsin ...\PYSBundle\Resources\public\js. In base.html.twigI've got:

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

In frontend.html.twigwhich extends of base.html.twigI've got:

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

At finally in votaciones.html.twigwhich extends of fronted.html.twig` I've got:

最后，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>

回答by Touki

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/文件夹中

app/Resources/public/js/

app/Resources/public/js/

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

• jquery.min.js
• jquery.dropdown.js
• Modernizr.js

Then, create an assetic.assetto fetch them easily

然后，创建一个assetic.asset以轻松获取它们

config.yml

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

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

@Bundle/Resources/public/js/frontbundle.js

@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 idto the <body>of each page.

我做的方式deffer的JavaScript需要执行一个设置id在<body>每个页面的。

Then, just import all of them in your base template

然后，只需将它们全部导入到您的基本模板中

@Bundle/Resources/views/base.html.twig

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