如何將當前值從dom重復傳播到內部dom-if

Question

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

Answer 1

您的代碼對我來說很正確：

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修改item之前lastDayOfWeek得到它，如下所示：

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>

如何將當前值從dom重復傳播到內部dom-if

問題描述

1 個解決方案

解決方案1
2 已采納

如何將當前值從dom重復傳播到內部dom-if

問題描述

1 個解決方案

解決方案1 2 已采納

解決方案1
2 已采納