Использование 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() {
    ...
});