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

Question

我想通过我创建的自定义元素设置 label/s 个 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

我成功了！我之前使用的变量 (属性) 是 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>

Answer 2

根据 documentation camelCase 属性是 "accessed" 来自元素外部的 camel-case。文档说明如下：

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName. The same mappings happen in reverse when converting property names to attribute names.

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

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

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

Polymer 1: How can I set up paper-checkbox label dynamically using a custom element

paper-elements

polymer-1.0