CheckBox disabled 属性绑定到 Polymer Property 的子属性答案

【问题标题】：CheckBox disabled attribute bound to Polymer Property's sub-propertyCheckBox disabled 属性绑定到 Polymer Property 的子属性
【发布时间】：2016-08-28 23:05:00
【问题描述】：

我正在尝试将Polymer 属性绑定到CheckBox 的禁用属性，但CheckBox 仅在开始时被禁用/启用。

我不得不提一下，我绑定的属性是Polymer 属性的子属性。

组件代码：

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

<dom-module id="checkbox-disabled-example">
  <template>
    <button
      on-click="onClick" >
        Toggle Disabled Enabled </button>

    <template is="dom-repeat" items="{{elementsObject.items}}" as="item">
      <input
        type="checkbox"
        disabled$="{{item.disabled}}" >
        {{item.name}} <br>
    </template>

  </template>
  <script>
    Polymer({
      is: 'checkbox-disabled-example',
      properties:{
        elementsObject:{
          type: Object,
          value: {}
        },      
      },
      onClick: function(){
        this.elementsObject.items.forEach(
          function(item, index, array){
            item.disabled = !item.disabled;
          }
        );
      }
    });
  </script>

</dom-module>

index.html 代码：

<body>

  <template id="just-for-demo" is="dom-bind" >

      <checkbox-disabled-example elements-object={{ckData}} >
      </checkbox-disabled-example>

  </template>

<script>
  window.addEventListener('WebComponentsReady', function() {
    var template = document.querySelector('template[is=dom-bind]');

    var data =
    {
      items:
      [
        { disabled: true,  name:"Element 01"},
        { disabled: false,  name:"Element 02"},
        { disabled: false,  name:"Element 03"},
        { disabled: false,  name:"Element 04"},
        { disabled: false,  name:"Element 05"},
        { disabled: true, name:"Element 06"}
      ]
    };
    template.ckData = data;

  });
</script>

</body>

如您所见，我创建了几个复选框，每个复选框都绑定到其项目的 disabled 属性。

当我点击按钮时，我会切换每个项目的禁用值，但是复选框状态不会改变。

我做错了什么？

【问题讨论】：

您是否尝试过使用dom-repeat 模板的observe 属性？示例：<template is="dom-repeat" items="{{elementsObject.items}}" as="item" observe="disabled">

标签： javascript polymer

【解决方案1】：

强制改变 object 或 array 的更改是不可观察的。如果您有一个简单的属性，例如：

this.name = 'Jane';

Polymer 将自动创建一个 setter，并自动获取对该属性的任何更改。但是，对对象 子属性 或 数组项 的更改将不起作用：

this.address.street = 'Elm Street';

address 上的 setter 不会被调用，也不会检测到更改。

Polymer 提供了对子属性和数组进行可观察更改的特定方法，在上面的示例中，您需要调用：

this.set('address.street', 'Elm Street');

address.street 部分称为path。它是一个字符串，用于标识相对于范围的属性或子属性。在大多数情况下，范围是宿主元素。如果要创建数组项的路径，则需要传递索引：

this.set('items.5', 'Changed index 5');

在您的具体示例中，对 click 事件处理程序进行简单更改就足够了：

onClick: function() {
  var that = this;
  this.elementsObject.items.forEach(function(item, index, array) {
    that.set('elementsObject.items.'+index+'.disabled', !item.disabled);
  });
}

或者你可以使用很酷的新 ES6 箭头函数语法，使其更具可读性，并删除丑陋的 that = this：

onClick: function() {
  this.elementsObject.items.forEach((item, index, array) => {
    this.set('elementsObject.items.'+index+'.disabled', !item.disabled);
  });
}

【讨论】：