다른 요소의 핵심 셀렉터에 의해 발생 된 폴리머 용지 드롭 다운의 코어 선택 이벤트

Question

종이 드롭 다운 요소의 on-core-select 이벤트가 내 셀의 별도 요소에 속한 코어 선택기에 의해 실행되는 문제가 발생했습니다. 고분자 앱. 여기

<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); 
     } 
}, 

응용 프로그램에서 전혀 다른 요소의 부분 인 코어 선택 및 관련 코드 : 여기 (중합체 이벤트 스크립트와 함께) 용지 드롭 다운 메뉴를 포함하고, 중합체 요소 발췌은 . FYI, SelectedItemKey은 관련 요소 모두에서 폴리머 '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> 

코어 선택 이벤트로 원치 않는 상호 작용을 피할 수있는 방법에 대한 제안 사항은 무엇입니까? 아마도 일종의 특정 청취자 (종이 드롭 다운 (들) 코어 선택 이벤트 수신에 국한)?

Answer 1

paper-dropdown은 자신의 하위 트리가 아닌 다른 곳에서 이벤트를 수신 할 수 없습니다. jsbin이나 복제본을 제시해야합니다. 그렇지 않으면 진단이 잘못되었다고 제안해야합니다.

시스템에 대해 잘 알고 있는지 확인하기 위해 이벤트의 진행 상황을 파악해야합니다.

그런데 문제를 다룰 수있는 또 다른 방법은 데이터 기반이면서 제어 중심이 아니라는 것입니다.

IOW, 이벤트 대신 데이터 변경에 반응하는 것이 가장 좋습니다. 내가 단지 응용 프로그램의 작은 조각을 볼 수 있기 때문에 정말 좋은 제안을하기 어렵지만, 여기에 몇 가지 제안 사항입니다

당신은 중요한 데이터가 item.data.designWidth[1]로 참조되는 것을 조금 불행한 일

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

이 . 일반적으로 응용 프로그램 데이터를 고려하여 사용자가 심하게 중첩 된 식을 사용하지 않기를 원합니다. 예를 들어, design-width-editor과 같은 UI를 작성하여 <design-width-editor designWidth="{{item.data.designWidth[1]}}">에 바인딩하면 designWidth을 처리하는 로직이 design-width-editor이고, 또는 data을 알 필요가 없습니다. 이렇게하면 데이터 구조에 훨씬 더 많은 유연성을 부여 할 수 있으며 생각을 쉽게 할 수 있습니다.

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

지금 당신은 필요한 조치를 취할 designWidth1Changed()을 구현할 수 있습니다 : 당신이 가지고있는 건설 주어진 어떤 경우

는, 당신이 할 수있는 한 가지 데이터를 직접 관찰 할 수 있습니다. 여기서 핵심은 designWidth 데이터를 수정하기 위해 더 이상 특정 UI에 의존하지 않는다는 것입니다. 그 UI를 자유롭게 바꿀 수 있습니다. 중요한 것은 값이 변경되면 어떤 조치가 취해지는 것입니다.

Answer 2

Scott이 올바른 길로 나를 안내했습니다. 이전 의견에서 설명한대로 일부 리팩터링을 한 후, 요소 모델 item이 변경되었을 때와 같이 관찰자가 실행되지 않도록 피하기 위해 async을 사용했습니다. 따라서 관찰 된 모든 속성). 다음은 마지막 문제를 해결하기 위해 구현 된 위에서 언급 한 호스트 요소의 스크립트 코드 샘플입니다.

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; 
}