JsRender での for と props の違い

JsRender のメモ。

■目的（こんな感じで出力する）
user list

名前	年齢	一番好きな本
太郎	30歳	title - ONE PIECE author - 尾田 栄一郎
花子	20歳	title - 日経新聞の数字がわかる本 author - 小宮 一慶

■データ構造

var data = {
  "title" : "user list",
  "users" : [
    {
      "name": "太郎",
      "age": "30",
      "favoriteBook": {
        "title" : "ONE PIECE",
        "author" : "尾田 栄一郎"
      }
    },
    {
      "name": "花子",
      "age": "20",
      "favoriteBook": {
        "title" : "日経新聞の数字がわかる本",
        "author" : "小宮 一慶"
      }
    }
  ]
};

■テンプレート

<script id="users" type="text/x-jsrender">
     {{if users.length > 0}}
          {{:title}}
          <table border="1">
               <tr>
                    <th>名前</th>
                    <th>年齢</th>
                    <th>一番好きな本</th>
               </tr>
               {{for users}}
               <tr>
                    <td>{{:name}}</td>
                    <td>{{:age}}歳</td>
                    <td>
                         {{props favoriteBook}}
                             {{:key}} - {{:prop}}<br />
                         {{/props}}
                    </td>
               </tr>
               {{/for}}
          </table>
     {{/if}}
</script>

※この程度の出力なら for も props も要らないのでは？というツッコミはなしで…(；´Д｀)

で、なにをメモしておきたいかというと、

• for
• props

の違いです。
for は配列の要素をループするけど、
props はオブジェクトの属性をループします。

上記の例で行くと、

• users は配列で、その中に各ユーザ情報がある

  • 各ユーザの情報を取得するには for を使う

• favoriteBook はオブジェクト

  • オブジェクトの各属性（キーと値）を表示するには props を使う

てな感じで使い分ける必要があるってことです。
まぁ、ドキュメントをよく見ればいいだけのことなんですけどね…(；´Д｀)

なので、詳細は本家のドキュメントを参照すること。
http://www.jsviews.com/#jsrapi