0

Handlerbars.jsで各ブロックヘルパーを使用するのに問題があります

<html>
<head>
    <script>
    </script>

    <script id="entry-template" type="text/x-handlebars-template">
        <div class="entry">
            {{#each people}}
                <p>{{firstName}} &nbsp;{{lastName}}</p>
            {{/each}}
        </div>
    </script>


    <script src="lib/jquery-1.8.2.min.js"></script>
    <script src="lib/handlebars.js"></script>

    <script type='text/javascript'>
        $(document).ready(function(){
          var people = [
            {firstName: "Yehuda", lastName: "Katz"},
            {firstName: "Carl", lastName: "Lerche"},
            {firstName: "Alan", lastName: "Johnson"}
          ] 

          var source   = $("#entry-template").html();
            var template = Handlebars.compile(source);
            var html = template(people);
            $('#content').html(html);
        });
    </script>
</head>
<body>
    <div id="content">
    </div>

</body>
</html>

テンプレートを以下のコードに変更すると、すべてがうまくいきます。

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#.}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/.}}
    </div>
</script>

各ヘルパーブロックの使用方法は？

4

1 に答える 1

0

.またはthisを{{#each}}次のように使用できます。

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#each .}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/each}}
    </div>
</script>

また：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        {{#each this}}
            <p>{{firstName}} &nbsp;{{lastName}}</p>
        {{/each}}
    </div>
</script>

デモ:

問題{{#each people}}は、JavaScript オブジェクトに使用した名前をテンプレートが認識できないことです。使用し{{#each people}}たい場合は、別のレイヤーを追加する必要があります:

var html = template({ people: people });

デモ: http://jsfiddle.net/ambiguous/3tKET/

于 2013-02-14T21:18:29.667 に答える