0

我在 Polymer 2 中有一个非常简单的应用程序。我有一个使用 dom-repeat 显示的静态项目列表。我有一个删除按钮，单击时我可以看到该项目已从列表中删除。但是 dom-repeat 没有刷新。它仍然是旧代码。

有人可以帮助如何在屏幕上反映更改：

代码片段如下：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<dom-module id="todo-list">
    <template>
        <style>
             :host {
                display: block;
            }

            .ibtn {
                float: right;
            }

            .item {
                width: 500px;
            }

            paper-icon-button {
                color: grey;
            }

            .list-todo {
                height: 700px;
                text-align: left;
                -webkit-text-fill-color: brown;
            }

            .list-todo ul li {
                width: 500px;
                font-family: sans-serif;
                font-size: 20px;
            }

            .list-todo .btn-set {
                float: right;
            }
        </style>


        <!-- <app-localstorage-document key="app-store" data="{{todos}}"></app-localstorage-document> -->

        <div class="list-todo">

            <template is="dom-repeat" items="{{todos}}">
                <ul>
                    <li>
                        <iron-icon icon="icons:arrow-forward"></iron-icon>
                        {{item}}
                        <span class="btn-set">
                            <paper-icon-button icon="create"></paper-icon-button>
                            <paper-icon-button icon="delete" on-tap="deleteTodo"></paper-icon-button>
                            <paper-icon-button icon="star"></paper-icon-button>
                        <span>  
                    </li>
                </ul>
            </template>   
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TodoList extends Polymer.Element {

        static get is() { return 'todo-list'; }

        static get properties() {
            return {
                todos: {
                    type: Object,
                    value: ["Build the code", "Check Sonar Issues", "Release the APP", "Deploy in Production", "Get Feedback"],
                    notify: true
                }
            };
        }

        populateTodoList() {
            return this.todos;
        }

        deleteTodo(item) {
            this.todos.splice(item.model.index, 1);
            this.todos.flush;
        }
    }

    window.customElements.define(TodoList.is, TodoList);
</script>
</dom-module>
4

1 回答 1

2

Javascript splice 会从数组中移除该项，但这并不意味着更改会反映在聚合物 shadowRoot 中。

为此，您必须使用聚合物阵列突变方法。看到这个。

在您的情况下将是：

this.splice('todos', item.model.index, 1);

另外，this.todos.flush;不需要。

我检测到的另一件事（与此无关），您确定要<ul>重复吗？这创建了一堆列表，每个列表中只有一个项目。

我建议你这样做

<div class="list-todo">
      <ul>
        <template is="dom-repeat" items="{{todos}}">
            <li>
                <iron-icon icon="icons:arrow-forward"></iron-icon>
                {{item}}
                <span class="btn-set">
                    <paper-icon-button icon="create">create</paper-icon-button>
                    <paper-icon-button icon="crystal-icons:lens" on-tap="deleteTodo">delete</paper-icon-button>
                    <paper-icon-button icon="star">star</paper-icon-button>
                <span>
            </li>
        </template>
      </ul>
    </div>

这样，您只需创建一个列表。

于 2017-10-25T12:25:54.027 回答