polymer/test/unit/dom-if-elements.html

<dom-module id="x-foo">
  <template>
    <x-bar id="bar"
           prop="{{prop}}"
           item-prop="{{item.prop}}">
    </x-bar>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-foo',
    properties: {
      prop: {
        notify: true
      },
      itemProp: {
        notify: true
      }
    }
  });
  Polymer({
    is: 'x-bar',
    properties: {
      prop: {
        notify: true
      },
      itemProp: {
        notify: true
      }
    }
  });
</script>

<dom-module id="x-nested-if">
  <template>
    <template is="dom-if" id="if-1" if="{{shouldStamp}}" on-dom-change="domUpdateHandler">
      <x-foo on-test1="testHandler1"
             prop="{{prop}}"
             item-prop="{{item.prop}}">
      </x-foo>
      <template is="dom-if" id="if-2" if="{{shouldStamp}}">
        <x-foo on-test2="testHandler2"
               prop="{{prop}}"
               item-prop="{{item.prop}}">
        </x-foo>
        <template is="dom-if" id="if-3" if="{{shouldStamp}}">
          <x-foo on-test3="testHandler3"
                 prop="{{prop}}"
                 item-prop="{{item.prop}}">
          </x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-if',
    testHandler1Count: 0,
    testHandler2Count: 0,
    testHandler3Count: 0,
    domUpdateHandlerCount: 0,
    testHandler1: function() {
      this.testHandler1Count++;
    },
    testHandler2: function() {
      this.testHandler2Count++;
    },
    testHandler3: function() {
      this.testHandler3Count++;
    },
    render: function() {
      this.$['if-1'].render();
    },
    domUpdateHandler: function() {
      this.domUpdateHandlerCount++;
    }
  });
</script>

<dom-module id="x-nested-if-configured">
  <template>
    <template is="dom-if" id="if-1" if="{{shouldStamp}}">
      <x-foo prop="{{prop}}"
             item-prop="{{item.prop}}">
      </x-foo>
      <template is="dom-if" id="if-2" if="{{shouldStamp}}">
        <x-foo prop="{{prop}}"
               item-prop="{{item.prop}}">
        </x-foo>
        <template is="dom-if" id="if-3" if="{{shouldStamp}}">
          <x-foo prop="{{prop}}"
                 item-prop="{{item.prop}}">
          </x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-if-configured',
    properties: {
      shouldStamp: {
        value: true
      },
      prop: {
        value: 'outer',
      },
      item: {
        value: function() { return {prop: 'outerItem'}; }
      }
    },
    render: function() {
      this.$['if-1'].render();
    }
  });
</script>