0

アンダースコア テンプレートは非常に単純に見えますが、私は最初の試みに取り組んでおり、困惑しています。

H1に人の名前を表示しようとしています。

これが私のテンプレートです：

<script id="tmpl-index-list" type="text/template">
<% _.each(data, function(item){  %>
    <li>
        <a href="#person" data-transition="slide">
            <h1><%=item.personName%></h1>
        </a>    
    </li>
<% }); %>

そして、ここに私のJSがあります：

var tmplMarkup = $('#tmpl-index-list').html();
var compiledTmpl = _.template( tmplMarkup, {data: IndexList.listEntries} );
$('#index-list-wrapper').html(compiledTmpl);

IndexList.listEntires は ListEntry オブジェクト、単純なキー/値オブジェクトの配列です。

たとえば、「クラス」は次のとおりです。

function ListEntry(){
    this.img_url = '';
    this.personName = '';
    this.personID = '';
};

その上でconsole.dirを実行すると、データはそこにありますが、テンプレートのitem.personNameの場合、未定義として表示されます。

私は何が欠けていますか？

前もって感謝します。

4

1 に答える 1

0

問題はあなたが渡しているデータにあると思います。あなたは を使用してIndexList.listEntriesいますが、サンプルデータを提供していません。

listEntriesのようなオブジェクトの配列であるあなたのコメントに基づいて、ListEntryいくつかのサンプルデータをまとめました。

var IndexList = {
    listEntries : [
        {
            "img_url" : "http://www.gravatar.com/avatar/72b3fbc4d71d3955deca44483322da23?s=32&d=identicon&r=PG",
            "personName" : "Tim",
            "personId" : "Tim76"
        },
        {
            "img_url" : "http://www.gravatar.com/avatar/0927a92a180a7552e2119742ede9b9cf?s=128&d=identicon&r=PG",
            "personName" : "Rob",
            "personId" : "Robert Price"
        }
    ]
};

このデータを使用すると、テンプレートを実行すると、「Tim」と「Rob」の両方がリスト アイテムとして正しく表示されます。

使用しようとしているデータをもう一度確認することをお勧めしますIndexList。問題はほぼ確実にそこにあります。

于 2012-12-20T18:25:52.917 に答える