polymer 纸下拉菜单的核心选择事件由另一个元素的核心选择器触发

Question

我遇到了一个问题，其中属于我的 polymer 应用程序中单独元素的核心选择器触发了 paper-dropdown 元素的 on-core-select 事件。以下是 polymer 元素的摘录，其中包括 paper 下拉菜单(以及 polymer 事件脚本):

<paper-dropdown id="widthUnits" class="unitSelection" selected="{{item.data.designWidth[1]}}" on-core-select="{{ conditionUnitSelectionChanged }}" valueattr="label">
                        <paper-item label="mm"></paper-item>
                        <paper-item label="cm"></paper-item>
                        <paper-item label="m"></paper-item>
</paper-dropdown>


conditionUnitSelectionChanged: function(e, detail, sender) {
      // Ensure the selection has in fact changed
      if (sender.selected != detail.item.label)
      {                    
          this.ajaxUpdateUnit(sender);
      }
},

这里是核心选择器和相关代码，它们是应用程序中完全不同的元素的一部分。仅供引用，SelectedItemKey 由所涉及的两个元素中的 polymer “Changed”事件监视......如果这很重要的话。

<core-selector id="itemSelector" target="{{$.itemList}}" multi="false" selected="{{selectedItemKey}}" selectedAttribute="active"></core-selector>

<div id="itemList" layout horizontal wrap>

        <template repeat="{{item, i in items}}">

            <div id="{{item.name}}">
                <entriesHeading name="{{item.name}}" horizontal layout center>
                    <div flex>{{item.name}}</div>
                    <paper-menu-button icon="more-vert" halign="right">
                        <paper-item label="Edit" on-tap="{{ itemEdit }}"></paper-item>
                        <paper-item label="Copy" on-tap="{{ itemCopy }}"></paper-item>
                        <paper-item label="Delete" on-tap="{{ itemDelete }}"></paper-item>
                    </paper-menu-button>
                </entriesHeading>
                <entriesContainer vertical layout>
                    *** container contents ***
                </entriesContainer>
            </div>

        </template>

</div>

关于如何避免与核心选择事件发生这种不必要的相互作用，有什么建议吗？也许是某种特定的监听器(仅限于监听 paper-dropdown(s) core-select 事件)？

Answer 1

paper-dropdown 是不可能的从除其自己的子树之外的任何地方接收事件。你必须提供 jsbin 或某种复制品，否则我必须表明你的诊断是不正确的。

您应该尝试弄清楚事件发生了什么，以确保您对系统有很好的了解。

话虽如此，解决问题的另一种方法是数据驱动而不是控制驱动。

IOW，最好对数据更改而不是事件使用react。很难给出真正好的建议，因为我只能看到您应用程序的一小部分，但这里有一些建议:

你有

<paper-dropdown id="widthUnits" class="unitSelection" 
   selected="{{item.data.designWidth[1]}}" 
   on-core-select="{{ conditionUnitSelectionChanged }}" valueattr="label">

有点不幸的是，这个重要数据被引用为 item.data.designWidth[1] 。通常，人们希望对应用程序数据进行分解，以便您不会使用这样的深层嵌套表达式。举个例子，如果您可以构建一个像 design-width-editor 这样的 UI并将其绑定(bind)到<design-width-editor designWidth="{{item.data.designWidth[1]}}">那么你可以将逻辑放入 design-width-editor 中这只涉及 designWidth并且不需要了解item或data 。这为您的数据结构提供了更大的灵活性，并且更容易思考。

无论如何，考虑到您所拥有的结构，您可以做的一件事就是直接观察数据:

observe: {
  'item.data.designWidth[1]`: 'designWidth1Changed'
}

现在您可以实现designWidth1Changed()采取必要的行动。这里的关键是您不再依赖任何特定的 UI 来修改 designWidth 数据。你可以随意更换那个UI；重要的是，如果值发生变化，就会采取一些操作。