javascript - polymer - 应用程序存储 : Remove entry and update storage

Question

我在尝试更新我的 . 自从过去 4 小时以来我一直在谷歌上搜索，但没有运气 我有以下代码:

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/app-storage/app-localstorage/app-localstorage-document.html">






<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
      .form {
        display: flex;
        flex-direction: column;
      }
      .form paper-input {
        flex: 1;
        margin-right: 10px;
      }
      .form vaadin-date-picker {
        flex: 1;
        margin-top: 10px;

      }
      .form paper-button {
        margin-top: 10px;
        align-self: flex-end;
      }

    </style>
    <div class="card">
      <div class="form">
      <paper-input label="Sum" value="{{todo.task}}" auto-validate placeholder="Suma" required=true pattern="[0-9]*" error-message="Numbers only"></paper-input>
      <vaadin-date-picker label="Date" value="{{todo.due}}"></vaadin-date-picker>
      <paper-button raised on-tap="_addToDo">Add</paper-button>
      </div>
<br>
      <vaadin-grid id="grid" items={{todos}}>

        <vaadin-grid-column width="calc(50% - 100px)">
          <template class="header">Sum</template>
          <template>{{item.task}}</template>
      </vaadin-grid-column>

    <vaadin-grid-column width="calc(50% - 100px)">
      <template class="header">Date</template>
      <template>{{item.due}}</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
        <template>
          <div style="display: flex; justify-content: flex-end;">
            <paper-button raised on-tap="_remove">remove</paper-button>

          </div>
        </template>
      </vaadin-grid-column>

  </vaadin-grid>
    </div>
<app-localstorage-document key="todos" data="{{todos}}">
</app-localstorage-document>
  </template>



  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }

      static get properties() {
        return {
          todo: {
            type: Object,
            value: () => { return {} }
          },
          todos: {
            type: Array,
            value: () => []
          }
        };
      }

      _addToDo() {
        this.push('todos', this.todo);
        this.todo = {};
      };

      _remove(e) {
        var index = this.todos.indexOf(e.model.item);
          this.todos.splice(index, 1);
          this.$.grid.clearCache();
      };


    }


    window.customElements.define(MyView1.is, MyView1);

  </script>
</dom-module>

我正在尝试在删除其中一项后更新 localStorage。 我不知道如何“提交更新”。删除项目后有什么方法可以更新 localStorage 吗？谢谢!

Answer 1

如果您使用 native 方法(如 Array.prototype.splice)操作数组，您必须事后通知 Polymer。 因此，您可以使用 notifySplices 进行通知。更多关于 notifySplices .

或者，使用 Polymer 方法进行数组突变。

每个 Polymer 元素都有以下可用的数组变异方法:

push(path, item1, [..., itemN]) 
pop(path) 
unshift(path, item1, [...,
itemN])
shift(path)
splice(path, index, removeCount, [item1, ..., itemN])

如果您使用的是 Polymer 阵列突变方法，则无需通知。 因此，使用 this.splice('todos', index, 1) 而不是 this.todos.splice(index, 1);，这将通知在数组 todos 也将反射(reflect)本地存储中的更改。