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 テンプレートは、渡すオブジェクト マップに「タイトル」などの名前が含まれていることを想定しています。私の知る限り、配列を渡すことはできません。代わりに、次のように配列を「アイテム」でラップします。

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 に答える