聚合物铁型反应

Question

我正在使用 Polymer 的 Iron-Form 组件来提交我创建的这个表单，但问题是来自 php 脚本的响应不会输出到实际的 html。我坚持如何做到这一点，并尝试了许多不同的事情。我究竟做错了什么？这是我的脚本：

<dom-module id="user-signup">
  <template>
      <form is="iron-form" id="formGet" method="post" action="/core/register.php">
      <paper-input char-counter autoValidate="true" error-message="{{item.error_name}}" label="Username" maxlength="25" required name="username"></paper-input>
      <paper-input char-counter error-message="{{error_displayn}}" label="Display Name" maxlength="35" required name="displayname"></paper-input>
      <paper-input char-counter error-message="{{error_password}}" label="Password" maxlength="25" required type="password" name="password"></paper-input>
      <paper-input char-counter error-message="{{error_password}}" label="Confrim Password" maxlength="25" required type="password" name="cfmpassword"></paper-input>
      <gold-email-input class="paper-input-input" label="Email" required name="email" auto-validate error-message="{{error_email}}"></gold-email-input>

      <br />

      <br>

        <paper-button raised onclick="clickHandler(event)"><iron-icon icon="check"></iron-icon>Submit</paper-button>
    </form>

</template>

<script>

    function clickHandler(event) {
        Polymer.dom(event).localTarget.parentElement.submit();           
    }

    Polymer({
        is: 'user-signup',
        properties: {
            error_name: {
                type: String,
                value:"Username Is Invalid!"
            },
            error_displayn: {
                type: String,
                value:"Display Name Is Invalid!"
            },
            error_password: {
                type: String,
                value:"Password Is Invalid!"
            },
            error_email: {
                type: String,
                value:"Email Is Invalid!"
            }
        },

        listeners: {
            'iron-form-response': 'formResponse',
            'iron-form-submit': 'formSubmit',
            'iron-form-error': 'formError'
        },
        formSubmit: function(event) {
            var pmn = document.querySelector('#waitForResponse');
            pmn.setAttribute("opened", "true");
            console.log("Form was submitted");

        },
        formResponse: function(event) {
            setTimeout(function(){
            var pmn = document.querySelector('#waitForResponse');
            pmn.removeAttribute("opened");
            }, 5000)
            console.log('There was a response');
            var response = event.detail;
            alert(response);                
        },
        formError: function(event) {
            console.log('Form Error, no actual response');
            setTimeout(function(){document.querySelector('#errorToast').show();
            var pmn = document.querySelector('#waitForResponse');
            pmn.removeAttribute("opened");
            }, 5000)
        }
    });
</script>
</dom-module>

现在侦听器开始工作，当 php 页面有响应时，会弹出警报，但它显示：[Object object]。这是php脚本：

<?php
     $data[] = array(
        "id" => $id, 
        "error_name" => $error_name,
        "success" => true
      );

     echo 'dd';
?>

我尝试将$data 回显为 json，但也没有用。我试图在 Google 和 Stack 上搜索它，但没有找到任何东西。我做错了什么？

Answer 1

根据the docs，您已将侦听器绑定到宿主元素，而不是形成自身。

也许这会有所帮助：

    listeners: {
        'formGet.iron-form-response': 'formResponse',
        'formGet.iron-form-submit': 'formSubmit',
        'formGet.iron-form-error': 'formError'
    }

Answer 2

什么是模型对象，您在 php 上的成功登录调用将返回？

您可以使用以下内容，假设 json 在 JS 承诺中返回

$myPhpCallLogon.then(function(user) {   
  user.firstName...
  user.id...
  user.email...

    var polyListUser = document.querySelector('#userView');

    set watch vars in polyListUser element.... 
}

然后使用您的模板将姓名、ID、电子邮件等放入显示用户的元素的 dom 中。