Question

我是对underscore.js的新手，我希望以下内容可以将列表传递给它，但它会呈现这一点：

Title: {{title}}
Author: {{author}}

这是一个片段：

<script src="/Scripts/underscore.js"></script>
    <script id="tmpl-books" type="text/template">
        <ul>
            <li>Title: {{title}}</li>
            <li>Author: {{author}}</li>
        </ul>
    </script>

    <script type="text/javascript">
                var list =
                [
                    {
                        "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();
            var compiledTmpl = _.template(tmplMarkup, list);
            $('#rendered').html(compiledTmpl);
     });
</script>

在Html主体中，我有一个id =“rendered”的div

<html> 
 <body>
  <div id="rendered"></div> 
 </body>
</html>

Answer 1

大括号是Mustache.js风格。 Underscore使用<%= %>语法：

<li>Title: <%= title %></li>

此外，Underscore.js模板要求名称“title”等位于您传递的对象图中。据我所知，你无法传递数组。相反，将数组包装在“items”中，如下所示：

var list = { items: [ ... ] };

并使用迭代它们的模板：

 <% _.each(items, function(item) { %>
    <ul>
        <li>Title: <%= item.title %></li>
        <li>Author: <%= item.author %></li>
    </ul>
 <% }); %>

Fiddle demo

Answer 2

您似乎尝试使用“胡子式”模板语法，而不是下划线。 Underscore确实允许你使用胡子风格，请参阅文档：http://underscorejs.org/#template，特别是下面的代码块：

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

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});

列表不在underscore.js中呈现

2 个答案: