javascript - Polymer 从元素获取返回值并使用实例方法

Question

我是 Polymer 新手，希望从其父元素内的元素获取返回值。

基本上，在单击按钮时，我想加载一个带有单选表单的对话框，当单击对话框上的确认按钮时，该表单将返回选中的单选按钮的值。但是，每次打开对话框时，我想清除单选按钮并使用 ajax 调用重新加载列表。

我的问题是 1，我似乎无法在 Polymer 对象内使用任何成员函数。其次，我认为我没有从对话框元素中正确获取“返回”值。

这是我的父元素:

<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。然后，我使用回调来获取位置，但我认为这不是正确的方法。

Answer 1

几个问题:

1. 在回调中，您通过 this.ID 引用元素，但正确的语法是使用 this.$.ID(假设这些元素不是动态创建的)(请参阅 Automatic node finding 。您的代码中还有一些此问题的实例，下面我只列出了一个。

   更改此:

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

   对此:

   clearSelectedPosition() {
     this.$.positionRadio.select(-1);
     ...
   }
   

2. 您的 Polymer 对象的方法是使用 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