本作品：

Question

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

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

我使用Polymer iron-collapse的“打开”字段与状态绑定以使其崩溃。这适用于Polymer 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>

铁崩解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;
    },
  });

这不起作用：

（使用具有布尔属性的Object数组）

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

我找到了一个黑客/解决方法，虽然我不相信这应该是唯一有效的方法..

我在div中包含 span 和 iron-collapse ，以便我可以使用querySelector和切换（）崩溃。

<强>铁崩解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：

new 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布尔值为true，而不是属性的值为true。绑定属性而不是值意味着Polymer在true时输出属性名称，但没有输出false。

iron-collapse opened = false在使用对象

本作品：

（使用布尔数组）

这不起作用：

（使用具有布尔属性的Object数组）

2 个答案: