Question

我有以下模板：

<template is="dom-repeat" items="{{myItems}}">
  <template is="dom-if" if="{{_shouldHaveLink(item)}}">
    <a href="#" on-tap="_linkTapped">Link</a>
  </template>
</template>

现在，如果链接未包含在dom-if中，我可以看到按下的项目：

  _linkTapped: function (oEvent) {
    console.log('Item link tapped:', oEvent.model.get('item'));
  }

但在dom-if内我无法做到。似乎item似乎超出了范围。我怎么才能得到它？

Answer 1

这是一个已知的bug聚合物的dom-repeat尚未解决，但在这种情况下有一个简单的解决方法。

由于dom-if模板没有restamp，只需在if条件为false（作为优化）时隐藏其内容，您可以模拟原始行为，同时避免dom-if - 根据相同的条件使用hidden属性替换模板的相关错误：

<div hidden$="{{!_shouldHaveLink(item)}}">
  <a href="#" on-tap="_linkTapped">Link</a>
</div>

或：

<a href="#" hidden$="{{!_shouldHaveLink(item)}}" on-tap="_linkTapped">Link</a>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: () => [
          { name: 'google', link: 'http://www.google.com' },
          { name: 'facebook' },
          { name: 'twitter', link: 'http://www.twitter.com' },
        ]
      }
    },
    _hasNoLink: function(item) {
      return !item.link;
    },
    _linkTapped: function(e) {
      console.log(e.model.item);
      // for demo only...
      e.preventDefault();
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <div>Facebook anchor is hidden because it has no link</div>
      <template is="dom-repeat" items="[[items]]">
        <a href="#"
           hidden$="{{_hasNoLink(item)}}"
           on-tap="_linkTapped">[[item.name]]</a>
      </template>
    </template>
  </dom-module>
</body>

codepen

正如@DocDude建议的那样，如果你引用了<dom-repeat>，另一个选择就是使用<dom-repeat>.modelForElement(e.target)：

//template
<template id="repeater" is="dom-repeat" items="[[items]]">

// script
_linkTapped: function(e) {
  const m = this.$.repeater.modelForElement(e.target);
  console.log(m.item);
  ...
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: () => [
          { name: 'google', link: 'http://www.google.com' },
          { name: 'facebook' },
          { name: 'twitter', link: 'http://www.twitter.com' },
        ]
      }
    },
    _hasLink: function(item) {
      return item.link;
    },
    _linkTapped: function(e) {
      const m = this.$.repeater.modelForElement(e.target);
      console.log(m.item);

      // for demo only...
      e.preventDefault();
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.3.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <div>Facebook anchor is hidden because it has no link</div>
      <template id="repeater" is="dom-repeat" items="[[items]]">
        <template is="dom-if" if="{{_hasLink(item)}}">
          <a href="#" on-tap="_linkTapped">[[item.name]]</a>
        </template>
      </template>
    </template>
  </dom-module>
</body>

codepen

单击dom中的链接时访问当前项目 - 如果在dom-repeat内部

1 个答案: