把手 - 无法循环访问数据

handlebar - unable to loop through data

本文关键字:访问 数据 循环 把手      更新时间:2023-09-26

我正在尝试将以下模型应用于车把模板以获得一个简单的列表,但我想数据层次结构或我尝试遍历数据的方式模型可能不正确。

数据.js

{  
   "categories":[  
      {  
         "games":{  
            "action":{  
               "game":{  
                  "name":"Game 1",
                  "Description":"Description 1"
               },
               "game":{  
                  "name":"Game 2",
                  "Description":"Description 2"
               }
            }
         }
      },
      {  
         "movies":{  
            "fantasy":{  
               "movie":{  
                  "name":"Movie 1",
                  "Description":"Description 1"
               },
               "movie":{  
                  "name":"Movie 2",
                  "Description":"Description 2"
               }
            }
         }
      }
   ]
}

模板

<ul id="categories">
    <li> Games 
        <ul class="subcategories">
            {{#each categories}} 
                     ...........
            {{/each}} 
        </ul>
    </li>
</ul>

我想得到一个简单的列表(见下文)

<ul id="categories">
    <li> Games 
        <ul class="subcategories">
            <li> Action
                <ul>
                    <li>Game 1</li>
                    <li>Game 2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li> Movies 
        <ul class="subcategories">
            <li> Fantasy
                <ul>
                    <li>Movie 1</li>
                    <li>Movie 2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

任何帮助将不胜感激。

您的数据结构并不真正代表您的预期输出。结构应该是这样的:

data (object)
    categories (array)
        category (object)
            category name
            subcategories (array)
                subcategory (object)
                    subcategory name
                    items (array)
                        item (object)
                            item name
                            item description

注意:我将最里面的数组称为items而不是games/movies/etc,因此在模板中使用它更容易。

你可以在这个jsfiddle中看到我的实现。