Question

我的自定义组件＆＃39; autocomplete-input＆＃39;应该提供自动完成功能。我正在使用＆＃39;列表＆＃39;纸张输入的属性＆＃39;。＆＃39;列表＆＃39;的值属性必须是＆＃39; id＆＃39;一位数据家＆＃39;。

这个工作正常，只要我只实例化一个＆＃39; autocomplete-input＆＃39;元件。如果有多个＆＃39;自动完成输入＆＃39;元素，它们都显示相同的自动完成提议。我想这是因为＆＃39;列表＆＃39;属性不使用本地DOM，因此使用第一个＆＃39; datalist＆＃39;有特殊的＆＃39; id＆＃39;。我怎么能避免这个？

＆＃39;自动完成输入＆＃39;元素：

<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中全局变量的更多详细信息，请参阅Polymer 1.0 Global Variables（我的JS不够好，因为我只使用Dart中的Polymer）

在聚合物中使用来自本地DOM的datalist

1 个答案: