12

contact.html.twigというビューがあります。いくつかのテキストフィールドを持つフォームがあります。javascriptを使用して、空のフィールドがないこと、およびその他のルールを検証したいと思います。しかし、定義とともに.jsをどこに置くかはわかりません。Twig表記を使用して.jsスクリプトを呼び出す方法もわかりません。

4

2 に答える 2

24

これは、JavaScriptを処理する方法の一般的な答えです...特に検証部分ではありません。私が使用するアプローチは、次のように、個々の機能をプラグインとして個別のJSファイルにバンドルResources/public/jsディレクトリに保存することです。

(function ($) {

    $.fn.userAdmin = function (options) {
        var $this = $(this);

        $this.on('click', '.delete-item', function (event) {
            event.preventDefault();
            event.stopPropagation();

            // handle deleting an item...
        });
    }
});

次に、asseticを使用してこれらのファイルをベーステンプレートに含めます。

{% javascripts
    '@SOTBCoreBundle/Resources/public/js/user.js'
%}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

私のベーステンプレートでは、最後にブロックがあり<body>ます$(document).ready();

<script>
    $(document).ready(function () {
        {% block documentReady %}{% endblock documentReady %}
    });
</script>
</body>

次に、「ユーザー管理」機能を備えた私のページで、次のようにuserAdmin関数を呼び出すことができます。

{% block documentReady %}
    {{ parent() }}
    $('#user-form').userAdmin();
{% endblock documentReady %}
于 2012-07-02T17:05:33.003 に答える
1

クライアント側の検証には基本的な HTML5 の機能で十分ではありませんか? Form コンポーネントによって提供されます。次のことも確認できます。

于 2012-07-02T16:39:33.360 に答える