Remove element containing if.bind

Help Requests
1

If I have a div with a if.bind like

<ul>
  <div if.bind="menu.hasSubMenuItems" >
    <li>Something</li>
  </div>
  <div if.bind="!menu.hasSubMenuItems" >
    <li>Something Else</li>
  </div>
</ul>

Can I have the if remove the html element in is placed on ?
I wan’t to remove the div’s here .

If that possible. I think I use to do this with the Angular 1

2

Why wouldn’t you just place the if binding on the <li> element itself?

3

I guess an alternative with the improved binding syntax this would be:

4

Yeah that’s ok for my simplification. My real code has nested if.bind elements though and I am not sure that will work for my materialize accordion.

The full template is

<ul class="side-navigation z-depth-2">

	<div repeat.for="menu of menus">

		<div if.bind="menu.hasSubMenuItems" >
			  <li class="collapsible-accordion">
			    <ul md-collapsible="accordion: true;">
				<li class="list-level-two">
				    <div class="collapsible-header">${menu.menuItem.title()}</div>
				    <div class="collapsible-body">
					<ul>
					    <li repeat.for="menuItem of menu.subMenuItems()" class="list-level-three">
					      <a click.delegate="showFlatPage(menuItem.pageId())" href.bind="menuItem.title()">${menuItem.title()}</a>
					    </li>
					</ul>
				    </div>
				</li>
			    </ul>
			  </li>
		  </div>

	</div>

</ul>
5

I would change:

for

That should eliminate the div for the repeat.

6

That would still leave the problem of

<div if.bind="menu.hasSubMenuItems" > leaving a div

7


I have copied your code to gistrun. Please note that references, unlike knockout observables, don’t use the trailing ‘()’ for binding targets.

8

Here is a version with the template improvements.

Best regards.

9

Excuse me. I still haven’t learned well how to share gists. Here it is. https://gist.run/?id=51a114adefc34914818bc4339f482410

1 Like
10

Thank you so much for your effort.

In the end I did this based on your help.

<ul class="side-navigation z-depth-2">
	<template repeat.for="menu of menus">
	  <li if.bind="menu.hasSubMenuItems" class="collapsible-accordion">
		  <ul md-collapsible="accordion: true;">
		          <li class="list-level-two">
		            <div class="collapsible-header">${menu.menuItem.title()}</div>
		            <div class="collapsible-body">
		                    <ul>
		                      <li repeat.for="menuItem of menu.subMenuItems()" class="list-level-three">
		                        <a click.delegate="showFlatPage(menuItem.pageId())" href.bind="menuItem.title()">${menuItem.title()}</a>
		                      </li>
		                    </ul>
		            </div>
		          </li>
		   </ul>
	  </li>

	  <li if.bind="!menu.hasSubMenuItems" class="list-level-one">
	      <a click.delegate="showFlatPage(menu.menuItem.pageId())" href.bind="menu.menuItem.title()">${menu.menuItem.title()}</a>
	  </li>
	</template>
</ul>
1 Like