`if` doesn't combine with `id` and `ref` as expected

jyasskin commented 10 years ago

<template id="foo" if="{{bar}}"> seems not to apply the if when the template is refferred to by another template.

Given the file:

<!DOCTYPE html>
<html>
<head>
<script src="polymer.min.js"></script>
</head>
<body>
<h1>Recursive Template</h1>
<template if="{{ items }}" id="t">
<ul>
<template repeat="{{ items }}">
  <li>{{name}}
      <template ref="t" bind></template>
  </li>
</template>
</ul>
</template>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('t').model = {
    'items': [
      {
        'name': 'Egypt'
      },
      {
        'name': 'Kenya',
        'items': [
          {
            'name': 'Nairobi'
          },
          {
            'name': 'Mombasa'
          }
        ]
      },
      {
        'name': 'Sudan',
        'items': {
          'name': 'Khartoum'
        }
      }
    ]
  };
});
</script>
</body>
</html>

I get output HTML that looks like:

<ul>
<template repeat="{{ items }}"></template>
  <li>Egypt
      <template ref="t" bind=""></template>
<ul>
<template repeat="{{ items }}"></template>
</ul>

  </li>

  <li>Kenya…

Because the template with id="t" uses if="{{ items }}", I had expected the <ul> inside Egypt to be dropped.

To fix this, I need to write:

<template bind id="t">
<template if="{{ items }}">

instead. Using <template bind id="t" if="{{ items }}"> didn't make the if take effect. If I drop the bind, the template doesn't get expanded at all, which makes some sense. Dropping the bind on the ref="t" template breaks the recursion, which surprised me since both if and repeat work without it. Using:

<template bind id="t" if="{{ items }}">
<ul>
<template repeat="{{ items }}">
  <li>{{name}}
      <template ref="t" bind if="{{ items }}"></template>
  </li>
</template>
</ul>
</template>

works, but the if is duplicated.

rafaelw commented 10 years ago

this is working as designed. The ref attribute allows you to specify another template's content to use in place of the any content provided inline. It will ignore any directives on the referenced template.

jyasskin commented 10 years ago

Could I ask you to double-check that the current design is a good idea? :)

rafaelw commented 10 years ago

Done. =-)

googlearchive / TemplateBinding

`if` doesn't combine with `id` and `ref` as expected #149