Data binding iron collapse opened=false与对象的布尔属性绑定时不折叠_Data Binding_Polymer_Polymer 1.0

Data binding iron collapse opened=false与对象的布尔属性绑定时不折叠

data-binding polymer

Data binding iron collapse opened=false与对象的布尔属性绑定时不折叠,data-binding,polymer,polymer-1.0,Data Binding,Polymer,Polymer 1.0,我有一个对象数组，其中有一个字段，用于指示是否应显示其属性： [{ state: true }, { state: false }, { state: false }] 我用聚合物铁坍塌的“开放”场与状态结合，从而使它坍塌。这在聚合物0.5中有效，但在1.0中无效。此外，如果我直接传递布尔属性，它也可以工作——只是不传递对象当我说“不起作用”时，我的意思是崩溃没有发生我未能正确迁移的是什么？或者这是一个在铁崩溃的错误这项工作：（使用布尔值数组） demo.html: &

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

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

我用聚合物铁坍塌的“开放”场与状态结合，从而使它坍塌。这在聚合物0.5中有效，但在1.0中无效。此外，如果我直接传递布尔属性，它也可以工作——只是不传递对象

当我说“不起作用”时，我的意思是崩溃没有发生

我未能正确迁移的是什么？或者这是一个在铁崩溃的错误

这项工作：（使用布尔值数组） 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>

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

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

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

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

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

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

<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

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

我找到了一个破解/解决方法，尽管我不认为这是唯一有效的方法

我将span和iron collapse包装在一个div中，这样我就可以使用querySelector并切换（）折叠

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>

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

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

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

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

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

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

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

尝试：

...

当属性存在时，HTML布尔值为真，而不是当属性值为真时。绑定属性而不是值意味着Polymer在

true

时输出属性名称，但对于false则不输出