javascript - 中的 不会在项目更改时调用方法

Question

我正在尝试根据函数中调用的条件来显示或不显示文本。

我有以下片段:

<dom-module id="lfr-defis">
<template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style is="custom-style">
        h4{
            margin-top: 10px;
            margin-bottom: 0px;
        }

        paper-card{
            margin-top: 5px;
        }

        p{
            margin-top: 5px;
            margin-bottom: 0px;
        }
    </style>
    <div>
        <paper-icon-button icon="add" on-tap="newDefi" style="float: right"></paper-icon-button>
    </div>
    <div style="margin-top: 5px">
        <template is="dom-repeat" items="[[defis]]">
            <paper-card style="width: 100%">
                <div class="card-content">
                    <div class="layout horizontal">
                        <paper-input label="Jeu" class="flex" always-float-label value="{{item.gameName::change}}"></paper-input>
                        <div style="margin:5px"></div>
                        <paper-input label="Incentive" class="flex" always-float-label value="{{item.incentiveName::change}}"></paper-input>
                    </div>
                    <label for="datetime"><b>Date : </b></label><datetime-input id="datetime" value="{{item.date::change}}"></datetime-input>
                    <h4>Défi FR</h4>
                    <div class="layout horizontal justified">
                        <paper-input value="{{item.fr.name::change}}" class="flex">
                            <iron-icon icon="label" slot="prefix"></iron-icon>
                        </paper-input>
                        <div style="margin:5px"></div>
                        <paper-input value="{{item.fr.amount::change}}" type="number">
                            <div slot="prefix">$ </div>
                        </paper-input>
                        <div style="margin:5px"></div>
                        <paper-input value="{{item.fr.rank::change}}" type="number">
                            <iron-icon icon="editor:format-list-numbered" slot="prefix"></iron-icon>
                        </paper-input>
                    </div>

                    <h4>Concurrent direct</h4>
                    <div class="layout horizontal justified">
                        <paper-input value="{{item.concurrent.name::change}}" class="flex">
                            <iron-icon icon="label" slot="prefix"></iron-icon>
                        </paper-input>
                        <div style="margin:5px"></div>
                        <paper-input value="{{item.concurrent.amount::change}}" type="number">
                            <div slot="prefix">$ </div>
                        </paper-input>
                        <div style="margin:5px"></div>
                        <paper-input value="{{item.concurrent.rank::change}}" type="number">
                            <iron-icon icon="editor:format-list-numbered" slot="prefix"></iron-icon>
                        </paper-input>
                    </div>

                    <template is="dom-if" if="{{!hasAllFields(item)}}">
                        <p style="color:red">Tous les champs doivent être renseignés</p>
                    </template>
                    <template is="dom-if" if="{{!validRank(item.fr.rank, item.concurrent.rank)}}">
                        <p style="color:red">Un des rangs doit être égal à 1</p>
                    </template>
                    <template is="dom-if" if="{{!validAmount(item.fr.rank, item.concurrent.rank, item.fr.amount, item.concurrent.amount)}}">
                        <p style="color:red">Le montant du 1er doit être supérieur à l'autre</p>
                    </template>
                </div>
                <div class="card-actions">
                    <paper-icon-button title="Sauvegarder" icon="save" on-tap="save" data-item$="{{item}}" style="color:deepskyblue"></paper-icon-button>
                    <paper-icon-button title="Annuler" icon="cancel" on-tap="cancel" data-item$="{{item}}" style="color:lightcoral"></paper-icon-button>
                    <paper-icon-button title="Supprimer" icon="delete" on-tap="delete" data-item$="{{item}}" style="float:right"></paper-icon-button>
                    <paper-icon-button title="Archiver" icon="archive" on-tap="archive" data-item$="{{item}}" style="float:right; color:gray"></paper-icon-button>
                </div>
            </paper-card>
        </template>
    </div>

</template>


<script src="defis.js"></script>
</dom-module>

Javascript:

class Defis extends Polymer.Element {
    static get is() {
        return 'lfr-defis';
    }

    static get properties() {
        return {
            defis: {
                type: Array,
                value: []
            }
        }
    }

    constructor() {
        super();
    }

    newDefi() {
        this.push('defis', {
            id: + new Date(),
            date: + new Date(),
            fr: {},
            concurrent: {}
        });
    }

    save(event) {
        const item = this.getItem(event);
        const index = this.defis.findIndex(d => d.id === item.id);
        if(index !== -1){
            this.defis[index] = item;
        }
        else{
            this.push('defis', item);
        }
    }

    cancel(event) {
        const item = this.getItem(event);
        const index = this.defis.findIndex(d => d.id === item.id);
        if(index !== -1){
            this.set('defis.' + index, item);
        }
    }

    delete(event) {
        const item = this.getItem(event);
        const index = this.defis.findIndex(d => d.id === id);
        this.splice('defis', index, 1);
    }

    archive(event) {
        const item = this.getItem(event);
        const index = this.defis.findIndex(d => d.id === id);
        this.splice('defis', index, 1);
    }

    getItem(event) {
        return JSON.parse(event.target.dataset.item);
    }

    hasAllFields(item, trigger) {
        return item.gameName && item.incentiveName && item.date &&
            item.fr.name && item.fr.amount && item.fr.rank &&
            item.concurrent.name && item.concurrent.amount && item.concurrent.rank;
    }

    validRank(rankA, rankB) {
        return rankA && rankA === '1' || rankB && rankB === '1';
    }

    validAmount(rankA, rankB, amountA, amountB) {
        return rankA > rankB && parseInt(amountA) < parseInt(amountB) ||
            rankA < rankB && parseInt(amountA) > parseInt(amountB) ||
            rankA === rankB && parseInt(amountA) === parseInt(amountB);
    }

    isValid(item) {
        return this.hasAllFields(item) && this.validRank(item.fr.rank, item.concurrent.rank) &&
            this.validAmount(item.fr.rank, item.concurrent.rank, item.fr.amount, item.concurrent.amount);
    }
}

customElements.define(Defis.is, Defis);

我遇到的问题是 hasAllFields(item)函数仅在页面加载时调用一次，而不是在我更改 <paper-input> 中的值时调用字段(这将是预期的行为)。因此，由于函数返回 false加载时，会显示消息，但它永远不会更新，因此当我的所有字段都已填写时不会隐藏。

我看到它可能与使用 item 有关<dom-repeat> 中的元素但我找不到任何解决方案。

Answer 1

如果你想让 Polymer 更新 DOM 中的子属性，那么你需要将这些子属性添加到方法调用中。 Polymer 不够智能，无法理解子属性何时更新。

<template is="dom-if" if="{{!hasAllFields(item.gameName, item.incentiveName, tem.date, item.fr.name, item.fr.amount, item.fr.rank, ), item.concurrent.name, item.concurrent.amount, item.concurrent.rank}}">

另一种方法是添加一个观察者，它检查与上面相同的属性，每次属性更改时更新一个 int 属性，然后将该 int 传递给 hasAllFields，例如 hasAllFields(inputUpdatedInt)。第三种方法是在输入上添加一个监听器，然后在设置新值之前使用 this.set('debris', [] 对碎片进行硬重置，因为这实际上会改变 您现在正在检查的项目。