templateSettings не работает
Я получаю ошибку компиляции во время выполнения, когда я пытаюсь отобразить следующий шаблон:
<script id="tmpl-books" type="text/template">
<% _.each(items, function(item) { %>
<ul>
<li>Title: <%= item.title %></li>
<li>Author: <%= item.author %></li>
</ul>
<% }); %>
</script>
<script type="text/javascript">
_.templateSettings = {
evaluate: /\{\{=(.+?)\}\}/g,
interpolate: /\{\{(.+?)\}\}/g,
escape: /\{\{-(.+?)\}\}/g
};
var list =
{
items:
[
{ "title": "Myst: The Book of Atrus", "author": "Rand Miller" },
{ "title": "The Hobbit", "author": "J.R.R. Tolkien" },
{ "title": "Stardust", "author": "Neil Gaiman" }]
};
$(document).ready(function () {
var tmplMarkup = $('#tmpl-books').html();
// ...tell Underscore to render the template...
var compiledTmpl = _.template(tmplMarkup, list);
// ...and update part of your page:
$('#rendered').append(compiledTmpl);
});
</script>
1 ответ
У вас есть две проблемы:
- Ваш
templateSettings
регулярные выражения плохо перекрывают друг друга. - Ваш
templateSettings
не соответствует вашему шаблону.
В документации не указано, в каком порядке применяются регулярные выражения, но исходный код:
var matcher = new RegExp([
(settings.escape || noMatch).source,
(settings.interpolate || noMatch).source,
(settings.evaluate || noMatch).source
].join('|') + '|$', 'g');
Особенно, interpolate
будет соответствовать раньше evaluate
, Ваш interpolate
ищет такие вещи, как {{ ... }}
поэтому он будет подбирать такие вещи, как {{= ... }}
до вашего evaluate
регулярное выражение может видеть их. Результат будет шальной =
в сгенерированном исходном коде. Так что ваши interpolate
регулярное выражение не может соответствовать вещам, которые ваш evaluate
буду искать. Вы, вероятно, хотите использовать эти регулярные выражения:
_.templateSettings = {
evaluate: /\{\{(.+?)\}\}/g,
interpolate: /\{\{=(.+?)\}\}/g,
escape: /\{\{-(.+?)\}\}/g
};
Обратите внимание, что я поменял, кто ищет {{= ... }}
а также {{ ... }}
,
Тогда вашему шаблону нужно использовать разделители в стиле усов, а не разделители по умолчанию:
<script id="tmpl-books" type="text/template">
{{ _.each(items, function(item) { }}
<ul>
<li>Title: {{= item.title }}</li>
<li>Author: {{= item.author }}</li>
</ul>
{{ }); }}
</script>
Исправление этих двух проблем должно заставить вещи работать.