javascript - 单击按钮时启用纸张输入( polymer 1.0)

Question

我正在开展一个有关医生名单的项目，并且我正在使用 polymer 1.0。

对于医生列表，我使用名为 doctors-grid.html 的 vaadin-grid，从 JSON 中获取数据。双击医生时，将打开一个模式对话框，其中包含有关所选医生的信息。 对话框的内容是一个名为 doctor-details.html 的单独组件。

有关医生的信息写在禁用的纸张输入字段中。

此对话框中有一个修改按钮。当我单击此按钮时，按钮的文本更改为“保存”。

现在我的问题:现在我还想在单击修改按钮时启用这些禁用的纸张输入字段，这样我就可以更改有关医生。更改后，我想将修改后的数据保存回 JSON，并再次将按钮更改为“修改”并再次禁用所有输入字段。

这是我的 doctor-details.html 的一部分

<link rel="import" href="../../bower_components/paper-input/paper-input.html"/>
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>

<dom-module id="doctor-details">
  <template> 
      <table>
        <tr>
          <td>Name</td>
          <td><paper-input label="{{doctordata.name}}" disabled></paper-input></td>
        </tr>
        <tr>
          <td>Forename</td>
          <td><paper-input label="{{doctordata.forename}}" disabled></paper-input></td>
        </tr>
      </table>
  </template>

  <script>
    Polymer({
      is: 'doctor-details',
      properties: {
        doctordata: {
          type: Object,
          value: null
        }
  </script>
</dom-module>

这是来自 doctors-grid.html，我在其中单击按钮，并且应该启用 doctor-details.html 中的纸张输入，因此我可以修改它们。在这个函数中，我还应该启用这些输入字段。

         onClick: function() {
          var button = this.$.msbutton;
          button.textContent = 'Save';

          var inputfields = [];
        //How can I save all paper-inputs in this array?
        //How can I enable all paper-inputs?
        }

我不会在这里直接发布整个代码，因为我认为当你查看整个项目时会更容易(并且代码太多)。 所以我有一个指向我的保管箱的链接:https://www.dropbox.com/s/crsrixs0nw6tvyy/WebContentEN.zip?dl=0

我自己用谷歌搜索并尝试过，但总是失败。我是 polymer 的初学者，所以如果有人可以帮助我，我将非常感激，因为我真的不知道该怎么做。谢谢!

Answer 1

How can I save all paper-inputs in this array?

直接从网格元素中检索输入字段并不是一个好主意。您可以通过绑定(bind)来控制 disabled 属性。在内部，您在doctor-details中创建一个属性并将其绑定(bind)到输入。

<paper-input label="{{doctordata.name}}" 
             disabled="{{disabled}}></paper-input>

<script>
Polymer({ 
   is: 'doctor-details',
   properties: { disabled: Boolean }
});
</script>

在外部添加相同的属性并与每个doctor-details绑定(bind)。

<doctor-details disabled="{{editDisabled}}></doctor-details>

<script>
Polymer({ 
   is: 'doctor-grid',
   properties: { 
      editDisabled: {
         value: true
      }
   },

   onClick: function() {
        this.editDisabled = !this.editDisabled;
   }
});
</script>

How can I enable all paper-inputs?

总而言之，您可以通过绑定(bind)到元素的单个 bool 属性来控制所有输入。

此外，我宁愿根据 editDisabled 隐藏/显示两个按钮，而不是更改单个按钮的标题。