Испускание Javascript из шаблонов jQuery

Question

Я хочу испустить несколько js из шаблонов jQuery, например, у меня есть шаблон типа

<script id="tmplID" type="text/x-jQuery-tmpl">
<input id="static.${val}" type="text"/>
<input id = "static2.${val}" type="text"/>
<script type="text/javascript">
$('#static.'+${val}).change(function(){
  alert('some value');
});
</script>
</script>  

Когда я называю этот шаблон как:

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

она отображает функцию изменения JavaScript как строку на странице, тогда как я хочу, чтобы она добавлялась как исполняемый JavaScript.

Answer 1

Есть несколько проблем с вашим кодом.

Прежде всего, вы должны никогда использовать вложенные <script> теги. Даже если закрывающий тег </script> находится внутри строки в блоке javascript, вы все равно должны разделить его, чтобы он не выглядел как есть, так как он может отключить даже самые совместимые с стандартами браузеры. Не говоря уже о старых ...

Точно так же вам следует избегать использования точек в идентификаторах, так как это очень легко пропустить при написании ваших селекторов jQuery. #id.something означает «выбрать элемент с идентификатором id, к которому также применен класс something» . Если вы не можете жить без него, вы можете избежать его, когда пишете свой селектор, например #id\\.something, который "выберет элемент с идентификатором id.something" .

Это также плохая идея, чтобы поместить javascript в ваш шаблон, вы должны переосмыслить то, что вы пытаетесь достичь. Почти всегда есть способ обойти это:

• Вы можете связать свои события с .delegate() или .live() с элементами, которые вы будете создавать только в будущем.

• Вместо жесткого кодирования идентификатора в скрипте вы можете использовать разные селекторы, например, Вы можете применить уникальный класс для использования с вышеуказанными привязками, чтобы он не мешал существующей разметке. Если вам нужен идентификатор внутри обработчика событий, вы можете легко извлечь его с помощью this.id или $(this).attr('id').

• Если вы хотите настроить 'some value' в своем скрипте, вы можете добавить настраиваемые атрибуты для ваших элементов, например, <input id="static_something" data-custom="some value" /> и извлеките его в своей функции, используя $(this).data('custom').

Принимая во внимание все вышесказанное, я бы переписал ваш код примерно так:

<script id="tmplID" type="text/x-jquery-tmpl">
<input id="static_${val}" class="templateinput" type="text" data-custom="value1" />
<input id="static2_${val}" class="templateinput" type="text" data-custom="value2" />
</script>

<script type="text/javascript">
// jQuery ready function
$(function(){
    $('.templateinput').live('change', function(){
        var element_id = this.id;
        var element_data = $(this).data('custom');

        alert('The value of input #' + element_id + ' is: ' + element_data);
    });
});
</script>

Если у вас есть известный контейнер, который будет содержать все элементы вашего шаблона, вместо этого используйте .delegate() для ясности, чтобы избежать глобального связывания.

Answer 2

Не могли бы вы просто настроить событие после рендеринга шаблона?

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

$('#static.'+obj.val).change(function() {
    ...
});