Polymer 聚合纸下拉列表的core select事件由另一个元素的core选择器触发

我遇到了一个问题，核心选择事件中的纸张下拉元素被属于我的polymer应用程序中一个单独元素的核心选择器触发。以下是polymer元素的摘录，其中包括纸张下拉列表和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);
      }
},

关于如何避免与core select事件发生这种不必要的相互作用，有什么建议吗？也许某个特定的侦听器仅限于侦听纸质下拉列表核心选择事件

纸张下拉列表不可能从任何地方接收事件，除非它在自己的子树中。你必须出示jsbin或某种复制品，否则我必须建议你的诊断是错误的

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

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

注意，最好是对数据更改而不是事件做出反应。很难给出真正好的建议，因为我只能看到你的应用程序的一小部分，但这里有一些建议：

你有

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

---

现在，您可以实施designWidth1Changed以执行所需的操作。这里的关键点是，修改designWidth数据不再依赖于任何特定的UI。您可以随意替换该UI；重要的是，如果值发生变化，就会采取一些措施。

斯科特让我走上了正确的道路。在前面的评论中描述的一些重构之后，我使用了异步，以避免在我不希望观察者执行的情况下执行观察者，例如当元素模型项对象发生更改时，以及因此更改其所有观察到的属性时。下面是上面提到的主机元素中的一些脚本代码的示例，这些脚本代码是为解决最终问题而实现的：

ignoreChanges: null,

observe: {
   'item.data.designWidth[0]': 'designWidthValueChanged',
   'item.data.designWidth[1]': 'designWidthUnitChanged',
}

designWidthValueChanged: function(oldVal, newVal) {
    if (!this.ignoreChanges) {
        // send update of width value input via ajax
        this.ajaxUpdateCondition("designWidth", newVal, this.item.data.designWidth[1]);
    }
},

designWidthUnitChanged: function(oldVal, newVal) {
    if (!this.ignoreChanges) {
        // send update of width unit selection via ajax
        this.ajaxUpdateCondition("designWidth", this.item.data.designWidth[0], newVal);
    }
},

itemKeyChanged: function(oldVal, newVal) {
    // itemKey is a published attribute that is 2 way bound to a parent element (where item selection occurs from a collection)                
    this.toggleIgnoreChanges(true); //set flag to ignore changes to observed values while item object switches 
    this.item = this.items[newVal]; //point to the correct/selected item in the collection (items is published attribute of this element)
    this.async(this.toggleIgnoreChanges);  //reset flag after observe functions have executed
},

toggleIgnoreChanges: function(flagstatus) {
    this.ignoreChanges = flagstatus || !this.ignoreChanges;
}

---

很难说没有看到你的应用程序的整体结构。核心选择事件是否可能正在冒泡，并由您的纸张下拉列表上的核心选择处理程序拾取？如果是这样的话，当事件在itemSelector上触发时，您可以调用StopRopagation。如果在同一个元素中有多个纸张下拉列表实例，那么在上面的示例中，我只显示一个，并且每个纸张下拉列表的所选属性都绑定到数组元素，如本示例所示，即{item.data.designWidth[1]}对于第一个下拉列表和元素中其他项的不同item.data属性。如何指定selectedChanged事件？我尝试实现selectedChanged聚合函数，也尝试了itemChangedas，当下拉选择更改时，这两个函数都没有触发。对不起，我太快了，给了你一些错误的信息。您的设置中没有可收听的selectedChanged。我将更新我的答案，让它更有意义。我采纳了你的建议，重构了代码，构建了一个自定义的item valueeditor元素……一个通用的复合元素，由纸张输入值输入和纸张下拉单元选择组成。例如，item valueeditor发布绑定到item.data.designWidth[0]的属性inputvalue和绑定到item.data.designWidth[1]的属性inputunitvalue。然后，宿主元素将单独观察这些特定的item.data值。现在的问题是，当所选项目本身发生变化时，各种观察功能都会启动。。。例如，当我第一次加载项或用户从集合中选择了不同的项时，是否有最佳实践模式或方法来防止或绕过观察到的函数？请参阅下面的代码…使用异步对我有利，以避免在我不希望观察函数时观察函数运行的问题。

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

ignoreChanges: null,

observe: {
   'item.data.designWidth[0]': 'designWidthValueChanged',
   'item.data.designWidth[1]': 'designWidthUnitChanged',
}

designWidthValueChanged: function(oldVal, newVal) {
    if (!this.ignoreChanges) {
        // send update of width value input via ajax
        this.ajaxUpdateCondition("designWidth", newVal, this.item.data.designWidth[1]);
    }
},

designWidthUnitChanged: function(oldVal, newVal) {
    if (!this.ignoreChanges) {
        // send update of width unit selection via ajax
        this.ajaxUpdateCondition("designWidth", this.item.data.designWidth[0], newVal);
    }
},

itemKeyChanged: function(oldVal, newVal) {
    // itemKey is a published attribute that is 2 way bound to a parent element (where item selection occurs from a collection)                
    this.toggleIgnoreChanges(true); //set flag to ignore changes to observed values while item object switches 
    this.item = this.items[newVal]; //point to the correct/selected item in the collection (items is published attribute of this element)
    this.async(this.toggleIgnoreChanges);  //reset flag after observe functions have executed
},

toggleIgnoreChanges: function(flagstatus) {
    this.ignoreChanges = flagstatus || !this.ignoreChanges;
}