Question

我正在使用Polymer.js，我正在创建一个带有下拉建议列表的输入元素（如google的搜索栏）。

基本上，我有一个核心输入和一个包含核心菜单的核心下拉列表。我添加了两个core-a11y-keys来观察核心输入上按下的箭头键，以便在核心菜单中移动所选项目。

我正在尝试将core-a11y-keys'“on-keys-pressed”事件直接绑定到core-menu的selectNext（）和selectPrevious（），但我无法让它工作。

<template>

<link rel="stylesheet" href="suggest-input.css">
<div class="suggest-input-wrapper">
  <paper-shadow layout start-justified horizontal center id="feedSearchInput" class="input-shadow">
    <input id="searchInput" is="core-input" on-input="{{searchChanged}}" flex placeholder="{{placeholder}}">        
    <paper-icon-button icon="search" class="feed-search-icon"></paper-icon-button>
    <core-dropdown autoFocusDisabled id="suggestionsDropDown" class="suggestions-dropdown">
      <core-menu class="suggestions-menu" id="suggestionsMenu">
        <template repeat="{{suggestion in suggestionList}}">
          <paper-item class="suggestion-item">
            <template if="{{suggestion.icon}}">
              <core-icon src="{{suggestion.icon}}"></core-icon>
            </template>
            <template if="{{!suggestion.icon}}">
              <core-icon icon="search"></core-icon>
            </template>
            <h5>{{suggestion.caption}}</h5>
          </paper-item>
        </template>
      </core-menu>
    </core-dropdown>
  </paper-shadow>
</div>

// First Trial 
<core-a11y-keys target="{{searchInput}}" keys="down" on-keys-pressed="{{suggestionsMenu.selectNext}}"></core-a11y-keys>
<core-a11y-keys target="{{searchInput}}" keys="up" on-keys-pressed="{{suggestionsMenu.selectPrevious}}"></core-a11y-keys>

// Second Trial 
<core-a11y-keys target="{{searchInput}}" keys="down" on-keys-pressed="{{$.suggestionsMenu.selectNext}}"></core-a11y-keys>
<core-a11y-keys target="{{searchInput}}" keys="up" on-keys-pressed="{{$.suggestionsMenu.selectPrevious}}"></core-a11y-keys>

// Third Trial 
<core-a11y-keys target="{{searchInput}}" keys="down" on-keys-pressed="{{this.$.suggestionsMenu.selectNext}}"></core-a11y-keys>
<core-a11y-keys target="{{searchInput}}" keys="up" on-keys-pressed="{{this.$.suggestionsMenu.selectPrevious}}"></core-a11y-keys>

我知道我可以使用自定义事件处理程序，而不是调用selectNext（）和selectedPrevious（），但知道它是否可以完成，以及如何在将来有所帮助。

Answer 1

尝试

target="{{$.searchInput}}"

绑定到Polymer.js中的嵌套元素函数

1 个答案: