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之前找到=之类的内容。结果将在生成的源代码中迷路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>的人。

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

{{1}}

解决这两个问题应该会有所帮助。

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

templateSettings不起作用

1 个答案: