将 div 更改为在没有 jquery 的情况下输入点击聚合物

Question

我有一个包含用户数据的纸卡，当我点击"edit"按钮时，我希望显示的数据变成文本框，以便我可以在点击[=20]时编辑数据并保存=].

我在 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>

Answer 1

您可以使用 paper-datatable. It works in the same way as you want. demo-link

而不是编写自己的组件

希望对您有所帮助:)

Answer 2

创建两个纸卡元素。一个带有文本，一个带有输入框。通过单击 edit/save 按钮并更改变量（下例中的 _view），使用 iron-pages 在它们之间切换。

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

将 div 更改为在没有 jquery 的情况下输入点击聚合物

change div to input on-click polymer without jquery

html

javascript

css

polymer