小胡子部分不循环传递给它的数据答案

【问题标题】：mustache partial not looping through the data passed down to it小胡子部分不循环传递给它的数据
【发布时间】：2018-09-25 10:54:38
【问题描述】：

我将mustache 与enter link description herepattern lab 结合使用，从json 数据文件中呈现出项目列表。鉴于此数据结构：

{
  "states": {
    "dropdown": {
      "items": [
        {
          "title": "CA"
        },
        {
          "title": "OR"
        },
        {
          "title": "TX"
        }
      ]
    }
  },
  "roles": {
    "dropdown": {
      "items": [
        {
          "title": "Mid-level Office Manager"
        },
        {
          "title": "Facility Manager"
        },
        {
          "title": "Resources Coordinator"
        }
      ]
    }
  }
}

如果我在我的部分中执行以下操作：

{{#states}}
  {{#dropdown.items}}{{title}}{{/dropdown.items}}
{{/states}}

名称渲染得很好。

但如果我这样做：

{{#states}}
  {{> molecules-dropdown-picker(btnDropdownToggleLabel: "OR")}}
{{/states}}

下拉选择器部分代码如下：

{{#dropdown.items}}{{title}}{{/dropdown.items}}

它不会渲染。我做错了什么？

【问题讨论】：

标签： json templates mustache partials patternlab.io

【解决方案1】：

我通过以下方式解决了这个问题：

JSON：

{
  "states": {
    "inputTextLabel": "State",
    "inputTextName": "address_state",
    "btnDropdownToggleLabel": "OR",
    "dropdownPickerItems": [
      {
        "dropdownItemTitle": "OR"
      },
      {
        "dropdownItemTitle": "TX"
      },
      {
        "dropdownItemTitle": "UT"
      }
    ]
  },
  "roles": {
    "inputTextLabel": "Company Role",
    "inputTextName": "company_role",
    "btnDropdownToggleLabel": "Facility Manager",
    "dropdownPickerItems": [
      {
        "dropdownItemTitle": "Facility Manager"
      },
      {
        "dropdownItemTitle": "Resources Manager"
      },
      {
        "dropdownItemTitle": "Mid-level Manager"
      }
    ]
  }
}

表格：

{{#states}}
  {{> molecules-dropdown-picker-list}}
{{/states}}

下拉选择器列表：

<div class="dropdown-picker js-dropdown">
  <ul class="dropdown-picker__list js-dropdown-list">
    {{#dropdownPickerItems}}
      {{> atoms-dropdown-picker-item}}
    {{/dropdownPickerItems}}
  </ul>
</div>

下拉选择器项目：

<li class="dropdown-picker__item js-dropdown-item">
  {{dropdownItemTitle}}
  <span class="dropdown-picker__selected-check">
    {{> atoms-icon(icon-type: "check-small") }}
  </span>
</li>

【讨论】：