Weird behavior on property change

Help Requests
1

I have a list view/view-model that displays a list of items. It also has a “pane” that slides out to show details of a selected item. The pane actually exposes a few different views and uses <compose> to display the appropriate portion of the selected item’s detail.

view

/*The List*/
<table>
   <tr repeat.for="item of items"  click.delegate="selectedItem = item">
      ...
   </tr>
</table>

/*The detail Pane*/
<div class="edit-pane ${selectedItem ? 'display' : ''}>
  <div class="pane-control">
      <i class="fas fa-times" click.trigger="selectedItem = null"></i>
  </div>
  <div class="pane-body">
    <div class="pane-nav">
      <span repeat.for="tab of editTabs" click.delegate="selectedTab = tab">
         ${tab.title}
      </span>
    </div>
    <compose view.bind="selectedTab.view"></compose>
  </div>
</div>

vm

export class Items {
   public items : any[] = []
   public selectedItem : any = null
   public editTabs : any[] = [
     {title: "Page 1", view: PLATFORM.moduleName("./edit-page1.html")},
     ...
    ]
   public selectedTab : any = this.editTabs[0];

The pane is displayed and hidden by adding/removing the display class instead of using if.bind or show.bind. The display class is added/removed by selectedItem being null or not. The pane also has an X to close the pane. When clicked, it sets selectedItem to null.

The composed detail views have no explicit view-model, so they inherit the existing view-model and access the selectedItem property. These views have text-boxes tied to various properties of the selectedItem.

The problem I’m having is that when I click the X to close the pane, selectedItem is set to null and the composed view updates by emptying the contents of the input elements that are tied to the properties of the selectedItem; however, the display class is not removed from the pane. BUT, if I click on the X a second time, then the display class is removed and the pane closes.

Any ideas on why the class of the edit-pane div is not being updated on the first click of the X?

1 Like
2

Your example should work just fine and I’m pretty sure this scenario is quite common. Though it’s hard to pin why you are having this issue. If there seems to be something wrong around selectedItem, maybe try changing the property name and see? (In the detail Pane)

3

Just to let you know, in the first line of the HTML snippet of the detail pane, a double quote is missing. Probably not the cause of your problem though :wink:

1 Like