0

短縮版

通常、xy.js を記述して jquery をインクルードし、それを html/twig にインクルードします。このファイルは、ready() またはおそらく load() を使用します。

jquery を twig の scipt-tag で直接使用し、場合によっては、その関数を twig-file の他の script-tag で直接呼び出す場合、不利な点はありますか?

ロングバージョン

問題に取り組んでいるときに（見たい場合は...）、本当に基本的な知識が必要であることがわかりました。

独自のjsファイルを介してjqueryを含める場合、次のことができます。

$(document).ready()DOM がロードされたときに何かを行うために使用する必要があります - OK

$(document).load()js がリソースに依存している場合は、ready()で完全にロードされない可能性がある場合に使用する必要があります。

しかし、HTML (または私の場合は twig) にコードを直接含めるとどうなりますか。すなわち：

   ...
   {% block subtitleRechts %}
        {% if app.user %}
            <span id="add">
                <a href="{{ path('add') }}" alt="add Item">
                    <img height="20" src="{{ asset('bundles/myBundle/images/plus.png') }}"></a>
            </span>
            <script>
                $("#add a").each(function() {
                    var url = $("#add a").attr("href");
                    var $dialog = $('<div class="modalerDialog"></div>').
                        dialog({
                            autoOpen: false,
                            modal: true,
                            width: 460
                        });

                    $(this).click(function() {
                        $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                            var title = $('#addPage').attr('title')
                            $dialog.dialog('option', 'title', title);
                        }).dialog('open');
                        return false;
                    });
                });
             </script>
             {% if whatever %}
                $("#add a").trigger("click");
             {% endif %}
        {% endif %}
    {% endblock %}
    ...

これにより、リンクに ajax ダイアログが追加され、「whatever」の場合は直接実行されます。

これはローカルで機能しますが、欠点があるかどうかはわかりません（小枝、html、jsを1つのファイルに混在させる以外に）。私の場合、含まれているjsファイルもあります

アドバイスありがとうございます。

4

1 に答える 1

1

欠点の 1 つは、コードの保守が難しいことだと思います。おそらく、より良い解決策は、次のようなサーバー側コードからの単一のフラグを使用してモデルを作成することです。

//this one goes to separate .js file
function MyModel (){

        this.Init = function () {
            $("#add a").each(function() {
                var url = $("#add a").attr("href");
                var $dialog = $('<div class="modalerDialog"></div>').
                    dialog({
                        autoOpen: false,
                        modal: true,
                        width: 460
                    });

                $(this).click(function() {
                    $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                        var title = $('#addPage').attr('title')
                        $dialog.dialog('option', 'title', title);
                    }).dialog('open');
                    return false;
                });
            });
        }();
        this.TriggerClick = function(boolean) {
            if(boolean){
                $("#add a").trigger("click");
            }

        };
}

//this one stays on the page
var model = new MyModel();
model.TriggerClick({% whatever %});
于 2013-05-03T08:52:57.410 に答える