Polymer - app-storage : 항목을 삭제하고 저장 장치를 업데이트하십시오.

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를 업데이트 할 수있는 방법이 있습니까? 감사!

Answer 1

네이티브 메서드 (예 : Array.prototype.splice)를 사용하여 배열을 조작하는 경우 사실 이후에 Polymer에 알려야합니다. 따라서 notifySplices을 사용하여 알릴 수 있습니다. notifySplices에 대한 자세한 정보

또는 배열 변형에 대해 폴리머 방법을 사용하십시오.

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

당신은 고분자 배열 변이 방법을 사용하는 경우에 통지 할 필요가 없습니다 :

모든 폴리머 요소는 사용할 수있는 다음 배열 변이 방법이있다. 대신 this.splice('todos', index, 1)을 사용하면 배열 todos의 변경 사항에 localstorage의 변경 사항도 반영됩니다.