2016-12-26 7 views
0

私はPolymerを初めて使い、親要素の中の要素から戻り値を取得したいと考えています。Polymerは要素からの戻り値を取得し、インスタンスメソッドを使用します

基本的に、ボタンをクリックすると、ラジオボタンをクリックすると、ラジオボタンをクリックするとラジオボタンの値が返されます。しかし、ダイアログが開かれるたびに、ラジオボタンをクリアし、ajaxコールを使用してリストを再ロードします。

私の問題は1です。私はPolymerオブジェクト内のメンバー関数を使用できないようです。そして、第二に、私はダイアログ要素から適切に「戻り値」を得ているとは思わない。あなたが見ることができるように

<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を呼び出すことはできません:ダイアログ罰金を開きますが、ここで私のダイアログ要素である

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

は、ここに私の親要素です。次に、私は位置を取得するコールバックを使用していますが、私はこれが正しい方法だとは思わない。

答えて

1

カップルの問題:あなたのコールバックで

  1. 、あなたがthis.IDであなたの要素を参照しているが、正しい構文はthis.$.IDを使用することです(これらの要素を動的に作成されていないと仮定した場合)(Automatic node findingを参照してくださいあり。あなたのコードでこの問題のいくつかのより多くのインスタンスであり、私は以下の一つだけをリストアップしました

    変更は、この:。

    clearSelectedPosition() { 
        this.positionRadio.select(-1); 
        ... 
    } 
    
    この210

    clearSelectedPosition() { 
        this.$.positionRadio.select(-1); 
        ... 
    } 
    
  2. あなた高分子オブジェクトのメソッドは、外側のコンテキスト(通常Windowオブジェクト)を取得しているES6矢印関数、と定義されます。コールバック内に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

関連する問題