在 ajax 响应聚合物中的铁形式后更新 UI

Question

我遇到一个问题，ajax 请求没有更新 UI。我需要手动刷新页面。

基本上它是一个点赞按钮。按下时，它应该会增加喜欢的次数。 HTTP 请求和响应工作正常。但是值 {{commentaire.likes}} 不会立即更新。

<template>
    <form is="iron-form" id="likeForm" method="post" action="/like/{{commentaire.heure}}" on-click="submitLike" on-iron-form-response="augmenterLikes">
        <paper-button raised>{{commentaire.likes}} J'aime</paper-button>        
    </form>

</template>

<script>


    Polymer({

        is: 'my-comment',
        properties: {
            commentaire : {
                type: Object,
                value: {},                  
            },
        }, 

        augmenterLikes: function(e) {
            this.commentaire.likes = e.detail.response;
        },



    });

如有任何帮助，我们将不胜感激。

Answer 1

为了更新深层属性，您必须使用 set 方法，例如您的情况：

this.set('commentaire.likes', e.detail.response);

我在这里使用随机数生成器做了一个例子：https://jsfiddle.net/fLbf6uag/1/

在 ajax 响应聚合物中的铁形式后更新 UI

Update UI after ajax response for iron-form in Polymer

javascript

ajax

polymer

polymer-1.0