underscore.js - 模板设置不起作用

Question

当我尝试呈现以下模板时，在运行时出现编译错误:

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

Answer 1

你有两个问题:

您的 templateSettings 正则表达式以一种糟糕的方式重叠。

您的 templateSettings 与您的模板不匹配。

documentation 没有明确说明正则表达式的应用顺序，但 source code is :

var matcher = new RegExp([
  (settings.escape || noMatch).source,
  (settings.interpolate || noMatch).source,
  (settings.evaluate || noMatch).source
].join('|') + '|$', 'g');

特别是， interpolate 将在 evaluate 之前匹配。您的 interpolate 正在寻找 {{ ... }} 之类的东西，因此它会在您的 {{= ... }} 正则表达式看到它们之前选择 evaluate 之类的东西。结果将是生成的源代码中的stray =。因此，您的 interpolate 正则表达式无法匹配您的 evaluate 将要查找的内容。您可能想使用这些正则表达式:

_.templateSettings = {
    evaluate: /\{\{(.+?)\}\}/g,
    interpolate: /\{\{=(.+?)\}\}/g,
    escape: /\{\{-(.+?)\}\}/g
};

请注意，我已经切换了寻找 {{= ... }} 和 {{ ... }} 的人。

然后你的模板需要使用 Mustache 风格的分隔符而不是默认的 Underscore 分隔符:

<script id="tmpl-books" type="text/template">
    {{ _.each(items, function(item) { }}
        <ul>
            <li>Title: {{= item.title }}</li>
            <li>Author: {{= item.author }}</li>
        </ul>
    {{ }); }}
</script>

解决这两个问题应该会使事情奏效。

演示: http://jsfiddle.net/ambiguous/my49N/