0

我是 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>
4

2 回答 2

1

花括号是 Mustache.js 样式。下划线使用<%= %>语法：

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

此外，Underscore.js 模板希望名称“title”等出现在您传递的对象映射中。据我所知，你不能传递一个数组。相反，将数组包装在“项目”中，如下所示：

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

并使用迭代它们的模板：

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

小提琴演示

于 2013-09-09T16:07:14.897 回答
1

您似乎正在尝试使用“mustache-style”模板语法，而不是下划线。Underscore 确实允许您使用 mustache 样式，请参阅以下文档：http ://underscorejs.org/#template ，特别是以下代码块：

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

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
于 2013-09-09T16:09:16.017 回答