Question

我有一张包含用户数据的纸卡，当我点击＆＃34;编辑＆＃34;按钮，我希望显示的数据更改为文本框，以便我可以编辑数据并在单击＆＃34时保存;保存＆＃34;。

我在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，而不是编写自己的组件。它的工作方式与您想要的相同。 demo-link

希望这会有所帮助：）

Answer 2

创建两个纸卡元素。一个带文字，一个带输入框。通过单击编辑/保存按钮并更改变量（下例中的_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>

将div更改为输入点击聚合物而不使用jquery

2 个答案: