iron-collapse opened=false 与对象的 Boolean 属性绑定时不折叠

Question

我有一个对象数组，其中有一个字段指示是否应显示其属性：

[{
  state: true
},
{
  state: false
},
{
  state: false
}]

并且我使用 Polymer iron-collapse 的 "opened" 字段与状态绑定以便折叠它。这在 Polymer 0.5 中有效，但在 1.0 中失败。此外，如果我直接传递一个布尔值属性 - 只是不传递一个对象，它就可以工作。

当我说 "doesn't work" 时，我的意思是崩溃不会发生。

我没有正确迁移什么？或者这是 iron-collapse 中的错误？

这个作品：

（使用布尔数组）

demo.html:

<html>
  <head>
    <link rel="import" href="iron-collapse-demo.html">
  </head>
  <body>
    <iron-collapse-demo states='[ true, false, false ]'></iron-collapse-demo>
  </body>
</html>

铁崩-demo.html:

<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
  </head>
  <body>
    <dom-module id="iron-collapse-demo">
      <style>
      </style>
      <template>
        <template is="dom-repeat" items="{{states}}">
          <span on-tap="collapseToggle"><+></span>
          <iron-collapse opened="{{item}}">
            <div>Hello collapse!</div>
          </iron-collapse>
        </template>
      </template>
    </dom-module>
  </body>
  <script src="iron-collapse-demo.html.0.js"></script>
</html>

铁崩-demo.html.0.js:

  Polymer({
    'is': 'iron-collapse-demo',
    'properties': {
      'states': Array
    },
    'ready': function() {

    },
    'collapseToggle': function(event, detail, sender) {
      event.model.item = !event.model.item;
    },
  });

这行不通：

（使用带有布尔值的对象数组属性）

demo.html

<html>
<head>
  <link rel="import" href="iron-collapse-demo.html">
</head>
  <body>
    <iron-collapse-demo nums='[ {"state": true}, {"state": false}, {"state": false} ]'></iron-collapse-demo>
  </body>
</html>

铁崩-demo.html:

<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
  </head>
  <body>
    <dom-module id="iron-collapse-demo">
      <style>
      </style>
      <template>
        <template is="dom-repeat" items="{{nums}}">
          <span on-tap="collapseToggle"><+></span>
          <iron-collapse opened="{{item.state}}">
            <div>Hello collapse!</div>
          </iron-collapse>
        </template>
      </template>
    </dom-module>
  </body>
  <script src="iron-collapse-demo.html.0.js"></script>
</html>

铁崩-demo.html.0.js:

  Polymer({
    'is': 'iron-collapse-demo',
    'properties': {
      'nums': Array
    },
    'ready': function() {

    },
    'collapseToggle': function(event, detail, sender) {
      var num = event.model.item;
      num.state = !num.state;
    },
  });

Answer 1

我找到了 hack/workaround，但我不认为这是唯一可行的方法..

我包裹了 span 和 iron-collapse 在 div 中，这样我就可以使用 querySelector 和 toggle() 折叠。

铁崩-demo.html:

<template is="dom-repeat" items="{{nums}}">
  <div>
    <span on-tap="collapseToggle"><+></span>
    <iron-collapse opened="{{item.state}}">
      <div>Hello collapse!</div>
    </iron-collapse>
  </div>
</template>

铁崩-demo.html.0.js:

新的 collapseToggle：

'collapseToggle': function(event, detail, sender) {
    // event.model.item.state = !event.model.item.state;
    event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
 }

Answer 2

尝试：

<iron-collapse horizontal opened$="[[item.state]]">
  ...
</iron-collapse>

HTML 布尔值在属性存在时为真，如果属性值为真则不为真。绑定属性而不是值意味着 Polymer 在 true 时输出属性名称，但在 false.

时不输出任何内容

iron-collapse opened=false 与对象的 Boolean 属性绑定时不折叠

iron-collapse opened=false not collapsing when bound with Boolean property of object

data-binding

polymer

polymer-1.0

这个作品：

（使用布尔数组）

这行不通：

（使用带有布尔值的对象数组属性）

iron-collapse opened=false 与对象的 Boolean 属性 绑定时不折叠

iron-collapse opened=false not collapsing when bound with Boolean property of object

data-binding

polymer

polymer-1.0

这个作品：

（使用布尔数组）

这行不通：

（使用带有布尔值的对象数组 属性）

iron-collapse opened=false 与对象的 Boolean 属性绑定时不折叠

（使用带有布尔值的对象数组属性）