我将mustache与在此处输入链接描述模式实验室结合使用来呈现来自 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:
{
"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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句