0

对 Polymer 来说相当新，所以希望这是一个简单的问题，但为什么我在插槽“句柄”中有一个输出，而不是参数 has-arrow 的输出？当我只写值时工作正常，就像我对位置和扩展所做的那样，但我希望它们都是动态的，来自我的 Polymer.Element。有什么想法吗？

<template is="dom-repeat" items="{{headers}}" as="header">
    <th scope="col">
        <juicy-popover expand-on="click" position="beforetop center" has-arrow="[[header.hasArrow]]"> <!-- Nothing here -->
            <div slot="expandable">
                [[header.tooltip]]
            </div>
            <div slot="handle">
                [[header.title]]<br>
                [[header.hasArrow]] <!-- Displays here! -->
            </div>
        </juicy-popover>
    </th>
</template>

脚本

class PolymerTable extends Polymer.Element {
  static get is() { return 'polymer-table'; }
  static get properties() {
    return {
      headers: {
        type: Array,
        value() {
          return [
            {},
            {
                tooltip: 'Displays headers',
                title: 'Headers',
                position: 'beforetop center, beforetop left',
                expandOn: 'hover',
                hasArrow: 'true'
            },
            {
                tooltip: 'If this option is on, user can use regular expressions in route URI',
                title: 'Use regular expression',
                position: 'beforetop center',
                expandOn: 'hover',
                hasArrow: 'false'
            },
            {
                tooltip: 'If this option is on, surface nesting is allowed',
                title: 'Allow surface nesting',
                position: 'beforetop center',
                expandOn: 'hover',
                hasArrow: 'true'
            },
            {
                tooltip: 'If this option is on, this row is enabled',
                title: 'Enabled',
                position: 'beforetop center, beforetop beforeright',
                expandOn: 'hover',
                hasArrow: 'true'
            }
          ];
        },
        notify: true
      }
    };
  }
}

更新

它与调用函数或读取属性无关。它只是将变量输出到参数中。

我试着把它放在多汁的popover之前。

<div test="{{index}}" testing="testing"></div>

这给出了结果：

<div testing="testing" class="style-scope polymer-table"></div>
4

1 回答 1

0

而不是has-arrow=[[header.hasArrow]]，您应该调用一个类方法并传入index的dom-repeat，例如has-arrow=[[_hasArrow(index)]]

_hasArrow(index) {
  return this.headers[index].hasArrow;
}

注意：如果您对 中的项目进行过滤或排序，则该值将不正确dom-repeat。它们需要匹配属性的顺序headers。

于 2018-03-27T18:36:23.103 回答