0

精简版

通常，我通过编写一个 xy.js 来包含 jquery，并将其包含在 html/twig 中。这个文件使用了 ready() 或者 load()。

如果我直接在 twig 的 scipt-tag 中使用 jquery 并且在某些情况下直接在 twig 文件中的其他脚本标签中直接调用该函数，是否有任何缺点？

长版

在解决问题时（如果你喜欢看......），我发现我需要一些非常基本的知识：

当通过自己的 js 文件包含 jquery 时，您可以执行以下操作：

$(document).ready()应该用来做事，当 DOM 被加载时 - 好的

$(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）。就我而言，还会有一个包含的 js 文件

谢谢你的建议。

4

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 回答