Changing visible pages dynamically through the selectable attribute doesn't work

[phani1kumar]

Description

I am using Polymer #2.0-preview version

iron-pages changing the visible pages dynamically. I tried to achieve this by data binding the selectable attribute via selectable="[[_calculatePageVisibility(user)]]" inside the function I was doing the following:

 _calculatePageVisibility(user){
        if(this.user)
          return '.default, .useronly';
        else
          return '.default'; 
 }

In debugger, I could see that the ironPage.selectable has changed as per the user state, but the ironPage.items is not getting updated. Please help me how to achieve this, and if I am doing something wrong in the process! (edited)

I've also tried to do the ironPage.forceSynchronousItemUpdate() in the _onUserChange observer.

 _onUserChange(user){
         var ironPage = this.root.querySelector('iron-pages');
         ironPage.forceSynchronousItemUpdate();
         ironPage.notifyResize();
         this.notifyPath('_pageData.page');
      } 

still no luck! kindly help.

Expected outcome

On user login, and once the user property is set, the visible pages list should change because the _calculatePageVisibility function is selecting the pages based on user logged in or not. But the change is not reflecting though the selectable property is getting updated.

Actual outcome

Once user logged in the visibility of the the pages change as expected by the selectable.

Steps to reproduce

1. Put a iron-pages element in the page.
2. Add say, 5 DIVs in the iron-pages with different classes say default for 3 of them and userOnly for two of them
3. Apply selectable attribute for iron-pages as the function _calculatePageVisibility provided above.
4. base the _calculatePageVisibility on some known user state (say a toggle button on the same page).
5. Then toggle the page and see the DIV visibility

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Tested in Chrome and Firefox

[tpluscode]

I just found the same problem. Did you find any workaround @phani1kumar?

[tpluscode]

Okay, here's what you can do for the time being. Whenever the value of _calculatePageVisibility(user) changes you have to make two calls on your iron-pages:

1. _updateItems() to discover items that match the selector
2. _updatSelected() to make sure you select/unselect an item in case its visibility should change

You may also want to wrap those calls in this.async (Polymer 1.x) or Polymer.Async.microTask.run in Polymer 2.0 to wait for bindings to set