Question

我正在开展一个关于医生名单的项目，我正在使用聚合物1.0。

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

有关医生的信息是用残疾纸输入字段写的。

我在此对话框中有一个修改按钮。当我点击此按钮时，按钮的文字变为＆＃34; Save＆＃34;。

现在我的问题：现在我还想点击修改按钮启用这些禁用的纸张输入字段，这样我就可以更改有关医生。在我更改它之后，我想将修改后的数据保存回JSON并再次将按钮更改为＆＃34;修改＆＃34;并再次禁用所有输入字段。

这是我的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

我用Google搜索并尝试自己，但我总是失败。我是聚合物的初学者，所以如果有人可以帮助我，我会非常感激，因为我真的不知道该怎么做。谢谢！

Answer 1

如何保存此阵列中的所有纸张输入？

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

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

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

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

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

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

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

如何启用所有纸张输入？

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

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

单击按钮时启用纸张输入（聚合物1.0）

1 个答案: