聚合物從元素中獲取返回值並使用實例方法

我是聚合物的新手，想要從其父元素內的元素獲取返回值。聚合物從元素中獲取返回值並使用實例方法

基本上，單擊按鈕時，我想加載一個對話框，其中包含單選按鈕，當對話框中單擊確認按鈕時，將返回選中的單選按鈕的值。但是，每次打開對話框時，我都想清除單選按鈕並使用ajax調用重新加載列表。

我的問題是1，我似乎無法使用聚合物對象內的任何成員函數。其次，我不認爲我正在從對話框元素中正確獲取「返回」值。

這裏是我的父元素：

<dom-module id="opr-remote"> 
    <template> 
     <paper-button raised on-tap="onTap" id="play-file">Play file</paper-button> 
     <opr-play-file-dialog id="playFileDialogElement"></opr-play-file-dialog> 
    </template> 
    <script> 
     Polymer({ 
      is: 'opr-remote', 

      onTap: (e) => { 
       const id = e.target.getAttribute('id'); 

       if ('play-file' === id) { 
        this.playFileDialogElement.open((playPosition) => { 
         console.log('play position: ' + playPosition); 
        }); 
       } 
      }, 
     }); 
    </script> 
</dom-module>

這將打開對話框罰款，但這裏是我的對話框元素：

<dom-module id="opr-play-file-dialog"> 
    <template> 
     <iron-ajax 
      id="currentPlaylistAjax" 
      url="/current-playlist" 
      handle-as="json" 
      last-response="{{ajaxResponse}}" 
      on-response="handleResponse"> 
     </iron-ajax> 

     <paper-dialog 
      entry-animation="scale-up-animation" 
      exit-animation="fade-out-animation" 
      id="playFileDialog"> 

      <h2>Play file</h2> 

      <paper-spinner active id="playFileLoadingSpinner"></paper-spinner> 

      <paper-radio-group on-change="positionOnChange" id="positionRadio" attr-for-selected="value"> 
       <template is="dom-repeat" items="[[ajaxResponse.data]]"> 
        <paper-radio-button value="[[item.position]]">[[item.fileName]]</paper-radio-button> 
        <br /> 
       </template> 
      </paper-radio-group> 

      <div class="buttons"> 
       <paper-button dialog-dismiss>Cancel</paper-button> 
       <paper-button dialog-confirm autofocus disabled id="playButton" on-tap="playPressed">Play</paper-button> 
      </div> 
     </paper-dialog> 
    </template> 
    <script> 
     Polymer({ 
      is: 'opr-play-file-dialog', 

      _selectedPosition: -1, 
      _playPositionCallback: null, 

      clearSelectedPosition:() => { 
       this.positionRadio.select(-1); 
       this._selectedPosition = -1; 
       this.playButton.disabled = true; 
      }, 

      open: (playPositionCallback) => { 
       this._playPositionCallback = playPositionCallback; 
       console.log(this._selectedPosition);// is undefined 
       // if this is un-commented, throws an error as it not being a function 
       //this.clearSelectedPosition(); 
       this.positionRadio.hidden = true; 
       this.playFileLoadingSpinner.hidden = false; 
       this.playFileDialog.open(); 
       this.currentPlaylistAjax.generateRequest(); 
      }, 

      handleResponse:() => { 
       //this.clearSelectedPosition(); 
       this.positionRadio.hidden = false; 
       this.playFileLoadingSpinner.hidden = true; 
      }, 

      positionOnChange: (e) => { 
       const target = e.target; 

       this._selectedPosition = target.value; 
       this.playButton.disabled = false; 
      }, 

      playPressed: (e) => { 
       if (this._selectedPosition < 1) { 
        return; 
       } 

       this._playPositionCallback(this._selectedPosition); 
      }, 
     }); 
    </script> 
</dom-module>

正如你看到的，我不能叫clearSelectedPosition。然後，我使用回調來獲得位置，但我不認爲這是正確的方法。

來源

2016-12-26 shiznatix

幾個問題：

在你的回調，你被this.ID引用您的元素，但正確的語法是使用this.$.ID（假設這些元素不動態創建）（見Automatic node finding有。在你的代碼這個問題的幾個例子，我已經上市僅低於

更改此：
```
clearSelectedPosition() { 
    this.positionRadio.select(-1); 
    ... 
} 
```
向該：
```
clearSelectedPosition() { 
    this.$.positionRadio.select(-1); 
    ... 
} 
```

你的聚合物對象的方法與ES6箭頭功能，其被捕獲的外上下文（通常是Window對象）的定義。您可以通過在回調中記錄this來確認此事。您應該在此處使用經典函數，以確保將Polymer對象本身用作方法上下文。你仍然可以在你的方法中使用箭頭函數。

更改此：

Polymer({ 
    is: 'opr-play-file-dialog', 

    clearSelectedPosition:() => {}, 
    open: (playPositionCallback) => {}, 
    handleResponse:() => {}, 
    positionOnChange: (e) => {}, 
    playPressed: (e) => {}, 
});

要這樣：

Polymer({ 
    is: 'opr-play-file-dialog', 

    clearSelectedPosition: function() {}, 
    open: function(playPositionCallback) {}, 
    handleResponse: function() {}, 
    positionOnChange: function(e) {}, 
    playPressed: function(e) {}, 
});

codepen

或者，你可以define a Polymer 1 element with an ES6 class：

class OprPlayFileDialog extends HTMLElement { 
    beforeRegister() { 
    this.is = 'opr-play-file-dialog'; 

    this.properties = { 
     playlist: { 
     type: Array, 
     value:() => [] 
     } 
    }; 
    } 

    clearSelectedPosition() {} 
    open(playPositionCallback) {} 
    handleResponse() {} 
    positionOnChange(e) {} 
    playPressed(e) {} 
} 
Polymer(OprPlayFileDialog);

codepen

來源

2016-12-27 02:32:39 tony19

聚合物從元素中獲取返回值並使用實例方法

回答

相關問題