Question

我想通过我创建的自定义元素设置paper-checkbox元素的label / s。

这就是我调用自定义元素的方式，其值设置为一个名为optionLabel的属性，我想在屏幕上显示复选框时显示该属性。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

带有破折号的属性名称将转换为camelCase属性名称通过在每个破折号之后大写字符，然后删除破折号。例如，属性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>

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

2 个答案: