动态菜单文章

时间:2017-11-15 13:47:28

标签: polymer polymer-1.0

我目前正在使用纸张下拉菜单,纸张列表框和纸张项目Web组件来尝试创建列表。代码如下:

<paper-dropdown-menu label="Assigned" vertical-align>
 <paper-listbox attr-for-selected="id" class="dropdown-content" fallback-selection="default" selected="{{assignedFilter}}">
  <paper-item id="default">Select Configs</paper-item>
  <paper-item id="displayAssignedConfigs">TRUE</paper-item>
  <paper-item id="displayAllConfigs">ALL</paper-item>
 </paper-listbox>
</paper-dropdown-menu>

在此示例中,有3个纸质项目具有静态文本。我想根据我正在制作的Ajax请求的响应动态生成列表中的项目数和这些项中的文本。

之前做过这种事情的任何想法或开发者都会有很大的帮助。我正在使用Polymer 1.0进行编程。

1 个答案:

答案 0 :(得分:0)

使用dom-repeat辅助元素:

<paper-dropdown-menu label="Assigned" vertical-align>
  <paper-listbox attr-for-selected="id" class="dropdown-content" fallback-selection="default" selected="{{assignedFilter}}">
    <template is="dom-repeat" items="{{ajaxResponse}}">        
      <paper-item id="{{item.id}}">{{item.label}}</paper-item>
    </template>
  </paper-listbox>
</paper-dropdown-menu>

以上假设您的ajax以以下形式返回响应:

[
  {id: "default", label: "Select Configs"},
  {id: "displayAssignedConfigs", label: "TRUE"},
  {id: "displayAllConfigs", label: "ALL"},
  ...
]