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">
      <!-- Comments should be good -->
      <x-foo on-test1="testHandler1"
             prop="{{prop}}"
             item-prop="{{item.prop}}">
      </x-foo>
      <template is="dom-if" id="if-2" if="{{shouldStamp}}">
        <!-- Comments should be good -->
        <x-foo on-test2="testHandler2"
               prop="{{prop}}"
               item-prop="{{item.prop}}">
        </x-foo>
        <template is="dom-if" id="if-3" if="{{shouldStamp}}">
        <!-- Comments should be good -->
          <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}}">
      <!-- Comments should be good -->
      <x-foo prop="{{prop}}"
             item-prop="{{item.prop}}">
      </x-foo>
      <template is="dom-if" id="if-2" if="{{shouldStamp}}">
        <!-- Comments should be good -->
        <x-foo prop="{{prop}}"
               item-prop="{{item.prop}}">
        </x-foo>
        <template is="dom-if" id="if-3" if="{{shouldStamp}}">
          <!-- Comments should be good -->
          <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>

<dom-module id="x-nested-if-individual">
  <template>
    <template is="dom-if" id="if-1" if="{{shouldStamp1}}">
      <x-foo prop="{{prop1}}"></x-foo>
      <template is="dom-if" id="if-2" if="{{shouldStamp2}}">
        <x-foo prop="{{prop2}}"></x-foo>
        <template is="dom-if" id="if-3" if="{{shouldStamp3}}">
          <x-foo prop="{{prop3}}"></x-foo>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-nested-if-individual',
    properties: {
      prop1: {
        value: 'prop1',
      },
      prop2: {
        value: 'prop2',
      },
      prop3: {
        value: 'prop3',
      },
      item: {
        value: function() { return {prop: 'outerItem'}; }
      }
    },
    render: function() {
      this.$['if-1'].render();
    }
  });
</script>

<dom-module id="x-textcontent">
  <template>
    <template id="domIf" is="dom-if" if>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      {{text}}
      <div>4</div>
    </template>
  </template>
  <script>
  Polymer({
    is: 'x-textcontent',
    properties: {
      text: {
        value: 'Stuff'
      }
    }
  });
  </script>
</dom-module>

<dom-module id="x-host">
  <template>
    <template id="domif" is="dom-if" if>
      <x-client></x-client>
      <x-client></x-client>
      <x-client></x-client>
    </template>
  </template>
  <script>
  Polymer({
    is: 'x-host'
  });
  Polymer({
    is: 'x-client',
    statics: {
      uid: 0
    },
    ready: function() {
      this.uid = this.statics.uid++;
    }
  });
  </script>
</dom-module>