聚合物点击是双张贴

Question

我想知道这里是否有人对 Polymer 重复发布表单有类似的问题。我的代码非常简单，如前所述，每次单击按钮时，表单都会发布两次。我正在使用 Polymer 05.5

<polymer-element name="book-form">
    <template>
        <label for="title">Title:</label>
        <input id="title" value="{{title}}" />
        <label for="author">Author:</label>
        <input id="author" value="{{author}}" />
        <label for="image">Image:</label>
        <input id="image" value="{{image}}" />
        <button on-click="{{fireAjax}}">Submit Form</button>
        <core-ajax id="ajax"
                   auto
                   url="http://localhost:45922/api/book"
                   handleAs="json"
                   method="POST"
                   >
        </core-ajax>     
    </template>
    <script>
        Polymer({
            fireAjax: function () {
                var data = { image: this.image, author: this.author, title: this.title };
                this.$.ajax.contentType = 'application/json';
                this.$.ajax.body = JSON.stringify(data);
                this.$.ajax.go();
            }
        });
    </script>
</polymer-element>

Answer 1

好的，我知道问题出在哪里了，只要 url 或参数发生变化，表单 post 上的自动属性就可以了。如果有人想控制 POST 何时发生，他们应该从 core-ajax 中删除自动属性。

<polymer-element name="book-form">
    <template>
        <label for="title">Title:</label>
        <input id="title" value="{{title}}" />
        <label for="author">Author:</label>
        <input id="author" value="{{author}}" />
        <label for="image">Image:</label>
        <input id="image" value="{{image}}" />
        <button on-click="{{test}}">Submit Form</button>
        <core-ajax id="ajax"
                   url="http://localhost:45922/api/book"
                   handleAs="json"
                   method="POST"
                   >
        </core-ajax>     
    </template>
    <script>
        Polymer('book-form', {
            test: function () {
                var data = { image: this.image, author: this.author, title: this.title };
                this.$.ajax.contentType = 'application/json';
                this.$.ajax.body = JSON.stringify(data);
                this.$.ajax.go();
            }
        });
    </script>
</polymer-element>

Answer 2

您的 fireAjax 函数更改了 core-ajax 的数据。因为 auto 已打开，所以触发了 ajax 调用。然后你调用 this.$.ajax.go() 所以调用再次被触发。

尝试删除 core-ajax 元素中的 auto。

聚合物点击是双张贴

Polymer on-click is double posting

polymer