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.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>
4

2 に答える 2

4

これが私がこのことをする方法です

まず、このアプリケーションで常に使用するライブラリを定義し、それらをapp/Resources/public/js/フォルダーに入れます

app/Resources/public/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 ファイルを作成します。

@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)

javascript の実行を遅らせるために行った方法では、各ページ idの にを設定する必要があります。<body>

次に、それらすべてを基本テンプレートにインポートするだけです

@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 に答える