聚合物 - 應用程序存儲：刪除條目並更新存儲

Question

我嘗試更新我的數組中的值時遇到問題。 我一直在尋找對谷歌自去年4個小時，但沒有運氣 我有follwing代碼：

<!-- 
@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

如果您使用本地方法（如Array.prototype.splice）操作數組，則必須事實通知Polymer。所以，你可以使用notifySplices來通知。更多關於notifySplices。或者，使用Polymer方法進行陣列突變。

每個聚合物元件具有可用以下數組突變方法：

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

你是不是需要，如果你使用的聚合物陣列突變方法來通知。 因此，使用this.splice('todos', index, 1)而不是this.todos.splice(index, 1);，這將通知數組todos中所做的更改，這些更改也會反映本地存儲中的更改。