Polymer1.0 中自定义创建的切换开关不适用于多个实例

Question

Imported Polymer (1.0.0) and created a custom control which toggles and display text based on toggle value whether it is enabled or disabled. 当我多次使用此元素时，文本未正确更改。仅对于第一个实例，它有效，其余实例文本没有改变，它在切换开关的两种状态下都保持为禁用。

<link rel="import" href="../bower_components/polymer/polymer.html" />

<dom-module id="toggle-element">

  <style>
    #labelDisplay {
      height: 14px;
      width: 43px;
      color: #4d4d4d;
      font-family: Roboto;
      font-size: 12px;
      line-height: 14px;
      margin-left: 6px;
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 41px;
      height: 16px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cacaca;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    .slider:before {
      /* Slider Round */
      position: absolute;
      content: "";
      height: 12.5px;
      width: 12.5px;
      top: 1px;
      background-color: white;
      -webkit-transition: 0.2s;
      transition: 0.2s;
    }

    input:checked + .slider {
      background-color: #329b46;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #329b46;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 40px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
  </style>
  <template>
    <label class="switch">
      <input type="checkbox" id="checkInput" on-change="setValue" />
      <span class="slider round"></span>
    </label>
    <span id="labelDisplay">Disabled</span>
  </template>

下面是根据切换开关值处理文本显示 (Enabled/Disabled) 的自定义元素脚本文件。

  <script>
    Polymer({
      is: "toggle-element",
      properties: {
        status: String,
      },
      setValue: function () {
        //Changes checkbox label based on checkbox value

        // Get status of toggle switch (Id : status) &
        // Set label text value respectively (Id : value)
        [
          document.getElementById("labelDisplay").innerHTML,
          this.status,
        ] = document.getElementById("checkInput").checked
          ? ["Enabled", "true"]
          : ["Disabled", "false"];
      },
    });
  </script>
</dom-module>

Answer 1

The problem is with using a function to update string 'Enabled/Disabled' in span tag. I think that process is shared by all instances instead of having its own.

So I changed the approach by using dom-if

<link rel="import" href="../bower_components/polymer/polymer.html" />

<dom-module id="toggle-element">
  <style>
    #labelDisplay {
      height: 14px;
      width: 43px;
      color: #4d4d4d;
      font-family: Roboto;
      font-size: 12px;
      line-height: 14px;
      margin-left: 6px;
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 41px;
      height: 16px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #cacaca;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }

    .slider:before {
      /* Slider Round */
      position: absolute;
      content: "";
      height: 12.5px;
      width: 12.5px;
      top: 1px;
      background-color: white;
      -webkit-transition: 0.2s;
      transition: 0.2s;
    }

    input:checked + .slider {
      background-color: #329b46;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #329b46;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 40px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
  </style>


  <template>
    <label class="switch">
      <input type="checkbox" id="checkInput" checked="{{status::input}}" />
      <span class="slider round"></span>
    </label>
    <template is="dom-if" if="[[!status]]"
      ><span id="labelDisplay">Disabled</span></template
    >
    <template is="dom-if" if="[[status]]"
      ><span id="labelDisplay">Enabled</span></template
    >
  </template>

  <script>
    Polymer({
      is: "toggle-element",
      properties: {
        status: {
          value: false,
          type: Boolean,
        },
      },
    });
  </script>
</dom-module>

在上述方法中，每个实例都有自己的模板来显示其状态(Enabled/Disabled)。 Perks of having template

单独分离模板部分以便于理解。

<template>
    <label class="switch">
      <input type="checkbox" id="checkInput" checked="{{status::input}}" />
      <span class="slider round"></span>
    </label>
    <template is="dom-if" if="[[!status]]"
      ><span id="labelDisplay">Disabled</span></template
    >
    <template is="dom-if" if="[[status]]"
      ><span id="labelDisplay">Enabled</span></template
    >
</template>

Polymer1.0 中自定义创建的切换开关不适用于多个实例

Custom created toggle switch in Polymer1.0 doesn't work for more than one instance

checkbox

polymer

polymer-1.0

togglebutton

multiple-instances