javascript - 在 polymer 中使用本地 DOM 中的数据列表

Question

我的自定义组件“自动完成输入”应该提供自动完成功能。我正在使用“纸张输入”的“列表”属性。 “list”属性的值必须是“datalist”的“id”。

只要我只实例化一个“自动完成输入”元素，这就可以正常工作。如果“autocomplete-input”元素有多个实例，它们都会显示相同的自动完成建议。我猜这是因为“list”属性不使用本地 DOM，因此使用第一个“datalist”和特定的“id”。我怎样才能避免这种情况？

“自动完成输入”元素:

<dom-module id="autocomplete-input">
  <template>
    <datalist id="autocomplete">
      <template is="dom-repeat" items="{{proposals}}">
        <option data-value$="{{item.value}}">{{item.content}}</option>
      </template>
    </datalist>
    <paper-input id="input" list="autocomplete" label="{{header}}" value="{{content::input}}"></paper-input>
  </template>
  <script>
  Polymer({
    is: 'autocomplete-input',
    properties: {
      header: String,
      content: String,
      proposals: Array
    }
  });
  </script>
</dom-module>

Answer 1

使用全局计数器并将其添加到您的 ID

<dom-module id="autocomplete-input">
  <template>
    <datalist id$="[[autocompleteId]]">
      <template is="dom-repeat" items="{{proposals}}">
        <option data-value$="{{item.value}}">{{item.content}}</option>
      </template>
    </datalist>
    <paper-input id="input" list$="[[autocompleteId]]" label="{{header}}" value="{{content::input}}"></paper-input>
  </template>
  <script>
  Polymer({
    is: 'autocomplete-input',
    properties: {
      header: String,
      content: String,
      proposals: Array,
    }
  }),
  autoCompleteId: function() {
    return this.autocompleteId = this.autocompleteId || ++globalId; 
    // see linke below to figure out how to use globals
  }
  </script>
</dom-module>

参见Polymer 1.0 Global Variables有关 Polymer 中全局变量的更多详细信息(我的 JS 不够好，因为我仅使用 Dart 中的 Polymer)