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

一些问题：

在回调中，您按this.ID引用元素，但正确的语法是使用this.$.ID（假设这些元素不是动态创建的）（请参阅{{3}在您的代码中还有一些此问题的实例，我在下面只列出了一个。

改变这个：
```
clearSelectedPosition() {
  this.positionRadio.select(-1);
  ...
}
```
对此：
```
clearSelectedPosition() {
  this.$.positionRadio.select(-1);
  ...
}
```

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

Automatic node finding

或者，你可以codepen：

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

define a Polymer 1 element with an ES6 class

Polymer从element获取返回值并使用实例方法

1 个答案: