如何将当前值从 dom-repeat 向下传播到内部 dom-if

    <template is="dom-repeat" items="{{days}}" as="item">
        <td class="d">{{formatDay(item)}}</td>
        <template is="dom-if" if="{{ lastDayOfWeek(item) }}">
        </template> 
    </template>

在这种情况下，lastDayOfWeek(item)没有得到dom-repeat所拥有的值。如何将item传播到dom-if？

你的代码对我来说是正确的：

https://jsbin.com/pebidacaku/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/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>
      <template is="dom-repeat" items="{{days}}">
        <span>{{item}}</span>
        <template is="dom-if" if="{{isThirdDay(item)}}">
          <span>*</span>
        </template>
        <br>
      </template>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          days: {
            type: Array,
            value: function() {
              return [
                '1/2/2016',
                '2/4/2016',
                '3/6/2016',
                '4/8/2016'
              ]
            }
          }
        },
        isThirdDay: function(day) {
          return day === this.days[2];
        }
      });
    </script>
  </dom-module>
</body>
</html>

内部模板的item不同的原因可能是由于formatDay lastDayOfWeek之前修改item，如下所示：

https://jsbin.com/himulegicu/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/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>
      <template is="dom-repeat" items="{{days}}">
        <span>{{formatDay(item)}}</span>
        <template is="dom-if" if="{{isThirdDay(item)}}">
          <span>*</span>
        </template>
        <br>
      </template>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
          days: {
            type: Array,
            value: function() {
              return [{
                value: '1/2/2016'
              }, {
                value: '2/4/2016'
              }, {
                value: '3/6/2016'
              }, {
                value: '4/8/2016'
              }]
            }
          }
        },
        formatDay: function(day) {
          if (day.value === this.days[2].value) {
            day.value = 'changed!!';
          }
          return day.value;
        },
        isThirdDay: function(day) {
          return day.value === '3/6/2016';
        }
      });
    </script>
  </dom-module>
</body>
</html>

相关内容

最新更新

热门标签：