промяна div на входа на клик полимер без jquery - javascript, html, css, полимер

Имам хартиена карта, съдържаща потребителски данни, че когато щракна върху бутона „редактиране“, искам показаните данни да се променят в текстови полета, така че да мога да редактирам данните и да запазя, когато щракна върху „запазване“.

Виждал съм нещо подобно в JQuery, но искам да избегна използването на това.

някакви мисли?

<paper-card>
<div class="card-content">
<div class="bodyHeaderText">Personal</div>
<div class="bodyNormalText">Name: Robert Jones{{user.FUllName}}</div>
<div class="bodyNormalText">DOB: 21/06/1987{{user.dateofbirth}}</div>
<div class="bodyNormalText">Age: 30{{user.age}}</div>
<div class="bodyNormalText">Gender: Male{{user.gender}}</div>
</div>
<div class="card-actions"
<paper-icon-button icon="create">edit mode</paper-icon-button>
</div>
</paper-card>

Отговори:

Създайте два елемента от хартиена карта. Един с текст и един с полета за въвеждане. Използвайте железни страници, за да превключвате между тях, като щракнете върху бутона за редактиране / запазване и промените променлива (_view в примера по-долу).

<iron-pages attr-for-selected="data-view" selected="{{_view}}">

<paper-card data-view="default">
<!-- TEXT -->
</paper-card>

<paper-card data-view="edit">
<!-- INPUTS -->
</paper-card>

</iron-pages>

Вместо да пишете свой собствен компонент, можете да използвате paper-datatable. Работи по същия начин, както искате. demo-link

Надявам се това да помогне :)