2016-03-03 31 views
4

見聚合物中的應用程序下面的HTML:如何獲得紙對話聚合物元素的「確認」返回值?

<paper-dialog id="confirmation" modal auto-fit-on-attach> 
    <h2><spring:message code="confirmation" /></h2> 
    <p>Are you sure ?<p> 
    <div class="buttons"> 
     <paper-button dialog-confirm><spring:message code="yes" /></paper-button> 
     <paper-button dialog-dismiss><spring:message code="no" /></paper-button> 
    </div> 
</paper-dialog> 

而且下面的JavaScript:

document.querySelector("#confirmation p").innerText = (message === undefined) ? "No message" : message; 
document.getElementById("confirmation").toggle(); 

如何從對話框返回值'confirmed'?

回答

4

通常您會在對話框中附加一個處理程序到iron-overlay-closed事件,以確定它是否爲confirmed,因爲紙對話框實現PaperDialogBehavior

因此,像:

<template is="dom-bind" id="scope"> 
    <paper-dialog id="confirmation" modal auto-fit-on-attach on-iron-overlay-closed="dismissDialog"> 
     <h2><spring:message code="confirmation" /></h2> 
     <p>Are you sure ?<p> 
     <div class="buttons"> 
      <paper-button dialog-confirm><spring:message code="yes" /></paper-button> 
      <paper-button dialog-dismiss><spring:message code="no" /></paper-button> 
     </div> 
    </paper-dialog> 
</template> 

<script> 
    (function() { 
    var scope = document.querySelector('#scope'); 

    scope.dismissDialog = function(e) { 
     console.log(e.detail.confirmed); 

     if (e.detail.confirmed) { 
     // confirmed logic goes here 
     } 
    } 
    })();  
</script>