Question

对于下面给出的代码this.$.createButton或document.querySelector('createButton')，可以使用ready方法。但是同一代码在handleRequestSent或handleResponseReceived内失败。我得到的错误信息是

未捕获的TypeError：无法读取属性＆＃39; createButton＆＃39;未定义的

我尝试调试，看来handleRequestSent和handleResponseReceived this实际上指向了铁-ajax，而不是元素dom root。任何建议都是受欢迎的。提前谢谢。

＆＃13;

<dom-module id="bortini-tv-create">
    <template>
        <form>
            <paper-input label="Name" value="{{tv.name}}"></paper-input>
            <paper-input label="Logo" value="{{tv.logo}}"></paper-input>
            <paper-input label="Address" value="{{tv.address}}"></paper-input>
            <paper-input label="Web site" value="{{tv.webSite}}"></paper-input>
            <paper-input label="Registration number" value="{{tv.regNumber}}"></paper-input>
            <br/>
            <br/>
            <paper-button id="createButton" raised on-tap="handleTvCreate">
                <iron-icon icon="redeem"></iron-icon>
                Add
            </paper-button>
            <paper-button id="cancelButton" raised on-tap="handleCancelTvCreate">
                <iron-icon icon="cancel"></iron-icon>
                Cancel
            </paper-button>
        </form>

        <iron-ajax
                id="ironAjax"
                url="/api/tv"
                content-type="application/json"
                handle-as="json"
                method="POST">
        </iron-ajax>

        <paper-toast id="toast"
                     duration="3000"
                     text="TV {{tv.name}} has been created">
        </paper-toast>
    </template>
</dom-module>
<script>

    function initModel() {
        return {"name": "", "logo": "", "address": "", "webSite": "", "regNumber": ""};
    }


    Polymer({
        is: "bortini-tv-create",
        properties: {
            tv: {
                type: Object,
                value: initModel(),
                notify: true
            }
        },
        ready: function() {
            this.$.ironAjax.addEventListener('error', this.handleError);
            this.$.ironAjax.addEventListener('request', this.handleRequestSent);
            this.$.ironAjax.addEventListener('response', this.handleResponseReceived);
        },
        handleTvCreate: function (event) {
            var ironAjax=document.querySelector("#ironAjax");
            ironAjax.body = JSON.stringify(this.tv);
            ironAjax.generateRequest();
        },
        handleCancelTvCreate: function (event) {
            MoreRouting.navigateTo('tv-list');
        },
        handleError: function(event) {
            this.$.createButton.disabled=false;
            this.$.cancelButton.disabled=false;

            var request=event.detail.request;
            var error=event.detail.error;
            var toast=document.querySelector("#toast");
            toast.text="Error: "+error;
            toast.show();
        },
        handleRequestSent: function (request) {
            console.log("boooooo");
            this.$.createButton.disabled=true;
            this.$.cancelButton.disabled=true;

        },
        handleResponseReceived: function (response) {
            document.querySelector('createButton').disabled=false;
            document.querySelector('cancelButton').disabled=false;

            console.log("Received response: " + JSON.stringify(response.detail.response));
            document.querySelector('#toast').show();
            MoreRouting.navigateTo('tv-list');
        }
    });
</script>

＆＃13;

Answer 1

因为您必须设置事件处理程序，因此调用处理程序（即this），不是您的元素实例。

解决这个问题的两种方法：

将事件处理程序绑定到元素实例：

this.$.ironAjax.addEventListener('error', this.handleError.bind(this));

这将确保事件处理程序内的this实际上是您想要的this。
以声明方式定义事件处理程序，然后Polymer将负责正确的绑定：

<iron-ajax ... on-error="handleError" ...></iron-ajax>

Answer 2

这是因为responseHandler方法是从一个里面的铁请求元素。所以这个背景转向了铁阿贾克斯元素。如果你想从那里返回你的“原始”射击元素，只需使用 this.parentElement 尝试这样的事情：

[...]
handleResponseReceived: function( request ) 
{
  var that = this.parentElement;
  that.$.createButton.disabled=true;
}

这应该可以解决问题。很抱歉回答那么晚。 ;）

无法在铁ajax事件方法中找到元素

2 个答案: