ハンドルバーのオブジェクトの配列を反復する方法は?


108

これはばかげた質問のように思えるかもしれませんが、どこにも答えを見つけることができません。

オブジェクトの配列をJSON形式で返すこのWeb APIを使用しています。

オブジェクトの配列

Handlebars docsは、次の例を示しています。

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

次のコンテキストで:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

私の場合、配列の名前はありません。これは、応答のルートオブジェクトにすぎません。{{#each}}運が悪いので使ってみました。

ハンドルバーを初めて使用する場合...何が欠けていますか?

更新

ここに私が尋ねていることを示すための簡単なフィドルがあります:http : //jsfiddle.net/KPCh4/2/

ハンドルバーでは、コンテキスト変数が配列ではなくオブジェクトである必要がありますか?


どのようにしてAPI結果をテンプレートに渡しますか(現在)?
ガブリエレペトリオーリ2014年

@ GabyakaG.Petrioli APIは私のものではなく、私はそれを制御できません。私はjQuery ajaxを使用して、オブジェクトの配列である応答オブジェクトを取得しています。
emzero 2014年

回答:


156

this各ブロックに渡すことができます。こちらをご覧ください:http : //jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

次に{{#each people}}、内部ループ内の外部ループのインデックス番号を呼び出すことは可能{{#each this}}ですか?いいね{{people@index}}
RegarBoy 2017年

17

このフィドルにはeach、直接jsonとの両方があります。http://jsfiddle.net/streethawk707/a9ssja22/

以下は、配列を反復する2つの方法です。1つは直接jsonを渡す方法で、もう1つはコンテンツホルダーに渡すときにjson配列に名前を付ける方法です。

Eg1:以下の例は、small_data変数内のjsonキー(データ)を直接呼び出しています。

HTMLでは、以下のコードを使用します。

<div id="small-content-placeholder"></div>

以下は、htmlのヘッダーまたは本文に配置できます。

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

以下のものはドキュメントの準備ができています:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

以下はjsonです:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan1@test.com" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" }
            ]
        };

最後に、jsonをコンテンツホルダーにアタッチします。

$("#small-content-placeholder").html(small_template(small_data));

Eg2:それぞれを使用した反復。

以下のjsonを検討してください。

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            }
      ];

jsonをコンテンツホルダーに渡しながら、次のように名前を付けます。

$("#big-content-placeholder").html(big_template({big_data:big_data}));

そしてテンプレートは次のようになります:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

どのようにgulpハンドルバーを使用してこれをコンパイルしますか?
webkitfanz 2017

10

私はtemplate()電話で意味しました。

結果をオブジェクトとして渡すだけです。したがって、呼び出す代わりに

var html = template(data);

行う

var html = template({apidata: data});

{{#each apidata}}テンプレートコードで使用する

http://jsfiddle.net/KPCh4/4/のデモ
クラッシュした残りのifコードを削除


3
それはいいですが、AZの答えの方が優れています。使用{{#each this}}は正しい形式です。
emzero 2014年

確かに、この方法はもっと理にかなっています、ありがとう!
woohoo 2017年

8

ハンドルバーは、コンテキストとして配列を使用できます。.データのルートとして使用できます。したがって、配列データをでループできます{{#each .}}

var data = [
  {
    Category: "General",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      }
    ]
  },
  {
    Category: "Minutes"
  }
];

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});
.row {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  {{#each .}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}}</p>
        {{/DocumentList}}
      </div>
    </div>
  {{/each}}
  </div>
</script>


1

とを使用this{{this}}ます。以下のnode.jsのコードを参照してください。

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

コンソールログ出力:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.