直接在html(和树枝)中使用jquery [英] Using jquery directly in html (and twig)
问题描述
短版
通常，我通过编写xy.js并将其包含在html/twig中来包含jquery.然后，此文件使用ready()或也许使用load().
如果我直接在twig的scipt-tag中使用jquery，而不是-在某些情况下，直接在twig-file中的另一个script-tag中直接调用该函数，有什么缺点吗?
长版
解决问题时(如果您愿意，看看... )，我发现我需要一些非常基本的知识:
当通过自己的js文件包含jquery时，您可以执行以下操作:
$(document).ready()应该用于在加载DOM时执行操作-确定
$(document).load()，而这些资源可能无法在 ready()
但是，如果我直接在html中包含一些代码(或在我的情况下为小树枝)，该怎么办? IE.
...
{% 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对话框，如果直接使用"任何"，则该链接将被执行.
这在本地有效，但我不知道是否有任何缺点(除了混合树枝，在一个文件中添加html的js).就我而言，还将包含一个js文件
建议.
我猜一个缺点是难以维护代码.也许更好的解决方案是使用来自服务器端代码的单个标志创建模型，如下所示:
//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 %});
Short Version
Normally, I include jquery by writing a xy.js an including it in html/twig. This file than uses ready() or maybe load().
Are there any disadvantages, if I use jquery directly in a scipt-tag in twig and than - in some case - call that function directly in an other script-tag directly in the twig-file?
Long Version
While working on a problem (if you like to look...), I found out, that I need some really basic knowing:
When include jquery via an own js-file, you can do:
$(document).ready() should be used to do things, when the DOM is loaded - OK
$(document).load() should be used, if js depends on resources, that may not be fully loaded at ready()
But what, if I include some code directly in the html (or twig in my case). I.e. that:
...
{% 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 %}
...
This should add an ajax dialog to a link an in the case of 'whatever' directly execute it.
This works local, but I just don't know, if there are any disadvantages (beside mixing twig, html an js in one file). In my case, there will also be an included js-file
Thx in advice.
I guess one disadvantage would be the difficulty to maintain the code. Perhaps the better solution would be to create a model, with single flags from server-side code like this:
//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 %});
这篇关于直接在html(和树枝)中使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
