CODEWITHSUNDEEP
aurelia
CowboyB
CowboyB

Reputation: 100

aurelia href.bind fails to work

I am having trouble with href.bind, it does not actually bind and generate the link anytime it is a sub of another href.bind. It typically happens when I am using a custom element within a custom element, but also when one href.bind is within another. The one I'm working on now is a custom nav item within my nav bar, where I have child routes for each navigation route, creating a dropdown navigation menu. Here, the first href.bind works and clicking the link will take you to the appropriate route, but the next one does not work. 

<li class="${styles}">
    <a data-toggle="${row.config.children? 'dropdown':'collapse'}" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href" class="${row.config.children? 'dropdown-toggle':''}">${row.title}</a>
    <ul class="dropdown-menu" if.bind="row.config.children">
      <li repeat.for="child of row.config.children">
         <a data-target="#bs-example-navbar-collapse-1.in" href.bind="child.href">${child.title}</a>
      </li>
    </ul>
  </li>

Upvotes: 0

Views: 1521

Answers (1)

nai
nai

Reputation: 1

I know a workaround. Don't use if.bind in outer element. Use show.bind instead and it will work. Seem like if.bind and child binding eval sequence are not correct.

Upvotes: 0

Related Questions