Question

我正在尝试将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>

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

当我点击按钮时，我切换每个项目的禁用值，但是“检查”框表示不会更改。

我做错了什么？

Answer 1

强制改变对象或数组的更改无法被观察到。如果您有一个简单的属性，如：

this.name = 'Jane';

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

this.address.street = 'Elm Street';

将不会调用地址上的设置者，并且不会检测到更改。

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

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

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

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箭头函数语法使其更具可读性并删除丑陋的 = this ：

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

CheckBox禁用属性绑定到Polymer Property的子属性

1 个答案: