Polymer 1：如何使用自定义元素动态设置纸张复选框标签

Question

我想通过我创建的自定义元素设置paper-checkbox 元素的标签。

这就是我如何调用我的自定义元素，并将值设置为一个名为 optionLabel 的属性，当复选框呈现在屏幕上时，我想显示该属性。

<check-list optionLabel="My first checkbox"></check-list>

我的自定义元素 check-list 如下所示：

<dom-module id="check-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
      <paper-checkbox on-change="_checkChanged">{{optionLabel}}</paper-checkbox>
  </template>
  <script>
  (function () {
      'use strict';

      Polymer({
          is: 'check-list',

          properties: {
              optionLabel: {
                  type: String,
                  notify: true
              }
          },

          _checkChanged: function (e) {
              alert("State changed");
          }
      });
  })();
  </script>
</dom-module>

我的目标是在 dom-repeat 布局中重用我的自定义元素并根据要求设置值。

这样做的正确方法是什么？

Answer 1

根据documentation camelCase 属性是从像camel-case 这样的元素外部“访问”的。文档说明如下：

带有破折号的属性名被转换为驼峰式属性名 通过将每个破折号后面的字符大写，然后删除 破折号。例如，属性 first-name 映射到 firstName。将属性名称转换为属性名称时，相同的映射会反过来发生。

换句话说，如果您执行以下操作，您的代码应该可以工作：

<check-list option-label="My first checkbox"></check-list>

Answer 2

我让它工作了！我之前使用的变量（属性）是optionLabel，它不起作用。不知道是什么原因，但是当我将其更改为optionlabel，即全部小写时，它工作正常！

不确定以上是否是我所面临问题的真正解决方案，但它现在对我有用:)

但是，如果有人请解释为什么optionLabel 不起作用，它仍然对像我这样的许多初学者很有帮助。

所以我的代码现在变成了这个

自定义元素：

<dom-module id="check-list">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
      <paper-checkbox on-change="_checkChanged">{{optionlabel}}</paper-checkbox>
  </template>
  <script>
  (function () {
      'use strict';

      Polymer({
          is: 'check-list',

          properties: {
              optionlabel: {
                  type: String,
                  notify: true
              }
          },

          _checkChanged: function (e) {
              if (e.target.checked) {
                  this.optionlabel = "Good to see you agree";
                  this.$.btnsubmit.disabled = false;
              } else {
                  this.optionlabel = "Please agree to proceed";
                  this.$.btnsubmit.disabled = true;
              }
          }
      });
  })();
  </script>
</dom-module>

电话看起来像：

<check-list optionlabel="My first checkbox"></check-list>