Question

我有一个<paper-dialog>模式，就像邀请新候选人接受挑战一样。在<invite-candidates>组件中有dom-repeat，它为<invite-candidate-input>列表中的每个对象呈现复杂输入（candidates）。

每当我打开（切换）该模态时，我清除列表并添加一个要渲染的新对象。第一次打开页面并打开模态，我看到了输入，如预期的那样。但是如果我关闭模态然后再次打开它，它会被清除，一个新对象被添加到列表中，但dom-repeat不会被通知。当我单击按钮添加另一个输入时，它会添加到列表中并进行渲染。但是我的列表现在有2个对象，只有1个<invite-candidate-input>。

<dom-module id="candidate-page">
<template>
    <button id="createActionButton" on-click="_toggleDialog"></button>
    <invite-candidates id="inviteCandidates"></invite-candidates>
</template>
<script>
    Polymer({
        is: 'candidate-page',
        properties: {
            Address: String,
            challenges: {
                type: Array,
                notify: true
            }
        },
        _toggleDialog: function () {
            this.$.inviteCandidates.toggle();
        }
    });
</script>

<dom-module id="invite-candidates">
<template>
    <paper-dialog id="dialog" modal style="background: white;">
        <form is="iron-form" id="form">
            <template is="dom-repeat" items="{{candidates}}">
                <invite-candidate-input candidate="{{item}}"></invite-candidate-input>
            </template>
            <div id="addCandidate" on-click="_addCandidate">
                <iron-icon icon="add"></iron-icon>
                <span>Add another candidate</span>
            </div>
            <div class="buttonGroup">
                <paper-button class="primary" raised on-click="inviteCandidates" dialog-confirm>Invite
                </paper-button>
            </div>
        </form>
    </paper-dialog>
</template>
<script>
    Polymer({
        is: 'invite-candidates',
        properties: {
            candidates: {
                type: Array,
                notify: true,
                value: []
            }
        },
        listeners: {
            'candidate-removed': '_removeCandidate'
        },
        toggle: function () {
            this._clearDialog();
            this._addCandidate();
            this.$.dialog.toggle();
        },
        _addCandidate: function () {
            this.push('candidates', {});
        },
        _removeCandidate: function(event){
            var index = this.candidates.indexOf(event.detail);
            this.splice('candidates', index, 1);
        },
        _clearDialog: function () {
            var el;
            while ((el = document.querySelector('invite-candidate-input')) !== null) {
                el.remove();
            }
            this.candidates = [];
        }
    });
</script>

<dom-module id="invite-candidate-input">
<template>
    <div id="inputContainer">
        <paper-input id="address" label="Address" value="{{candidate.Address}}"></paper-input>
        <iron-icon icon="remove" on-click="_removeItem"></iron-icon>
    </div>
    <br>
</template>
<script>
    Polymer({
        is: 'invite-candidate-input',
        properties: {
            challenges: {
                type: Array
            },
            candidate: {
                type: Object,
                reflectToAttribute: true,
                notify: true
            }
        }
        _removeItem: function () {
            this.fire('candidate-removed', this.candidate);
            this.remove();
        }
    });
</script>

Answer 1

这是因为在_clearDialog你做this.candiates = [];。如果你做this.splice('candidates', this.candidates.length)它应该有效。

数组更改时，无法正确通知Polymer 1.0 dom-repeat

1 个答案: