Template projected into slot breaks children bind

Help Requests
1

Found a strange behavior when using if.bind inside a nested template tag that is itself projected into a component’s slot.

Basically the html structures below:

app.html

<template>
  <component>
    <template>
      <div if.bind="expr">
      </div>
    </template>
  </component>
</template>

component.html

<template>
  <slot></slot>
</template>

(I omitted a if.bind on the nested template tag that is required otherwise that tag never renders, it would be interesting to know why this requirement exists, but it is not the main question)

The binding only works (as in 'dynamically updates according to the current value of expr') if expr initially resolves to false, if it initially resolves to true the binding seems to be ignored.

gist:

I was wondering why that happens? Can templates be used like this?

Thanks.

2

There is a known issue around using repeat.for (and/or if.bind) back to back on <template> tag. <template> tag is special in Aurelia, it doesn’t create real DOM node.

The easy fix is to not use <template> with if.bind, change it to <div if.bind="a"> or <some-tag if.bind="a">.

BTW, your html is not correct, you paired <div> with </span>. Please use a lint tool (like htmlhint) in your editor.

https://github.com/aurelia/templating-resources/issues/265