What does reRender do? The page doesn't change after calling it

[bandtank]

I created two views: parent and child. The parent view creates the child view during setup. The child view has a few dropdown buttons with dynamic options.

When the parent makes changes, it sets the child to display different options in the dropdown menus. Everything works except the UI. The variables are set correctly and the API calls are right, but the dropdown menus are not updated until the page has been refreshed.

For example, one of the dropdown menus is "Time Period", which has "Day", "Week", and "Month" options in a certain mode. When the mode changes, the options for "Time Period" are only "Day" and "Week", so "Month" needs to be removed from the menu. If I remove and recreate the view, it works fine. If I refresh the page, it works fine. I can't figure out how to update the view because view.reRender() doesn't work.

Any help would be greatly appreciated.




This is how the dropdown button is defined:

    <div class="btn-group pull-right calendar-buttons">
      <button type="button" class="btn btn-text dropdown-toggle" data-menu-button="calendar" data-toggle="dropdown">{{{calendarNameSelected}}}</button>
      <ul class="dropdown-menu pull-right">
        {{#each calendars}}
        <li>
          <a role="button" tabindex="0" data-action="calendar" data-calendar-id="{{this.id}}">
            <span class="fas fa-check filter-check-icon pull-right{{#ifNotEqual ../calendarIdSelected this.id}} hidden{{/ifNotEqual}}"></span>
            {{name}}
          </a>
        </li>
        {{/each}}​
      </ul>
    </div>​​

This is how the view is defined:

  setup() {
    ...
    this.calendars = this.options.calendars
    this.calendarIdSelected = this.options.calendarIdSelected
  }

  data() {
    ...

    return {
      ...
      calendars: this.options.calendars,
      calendarIdSelected: this.calendarIdSelected,
      calendarNameSelected: this.getCalendarNameById(this.calendarIdSelected),
    }
  }​

This how the view is created:

    this.createView('buttons', 'calendar-pro:views/buttons', {
      ...
      calendars: this.calendars,
      calendarIdSelected: this.calendarIdSelected,
      calendarEvents: this.calendarEvents,
      calendarIdDefault: this.calendarIdDefault,
      selector: '.button-container',
    }, view => {
      console.log(view)
    })​​

Finally, this is how I'm trying to change the buttons:

this.getViewByName("buttons").calendars = newCalendars
this.getViewByName("buttons").reRender()

[yuri]

It should work (re-render already rendered view) as we use extensively. Try to debug to figure out what's going wrong. 'data' should be called on re-render, 100% sure.

[bandtank]

Thank you for the tip. I did not realize how it worked until I read your comment

[telecastg]

I think the issue is that the data method returns this.options.calendars, which is defined in the setup() method as "calendars" instead of returning the updated value of this.calendars

try modifying data() to read:

return {
...
calendars: this.calendars,
...

A view order of method execution is init() > setup() > data() and reRender() invokes data() again, so in your case, when you were defining "calendars" as "this.options.calendars" in the data() method, you were actually overriding any changes and feeding the original data fed when the view was created to the template.

[bandtank]

Thank you for posting this. It helped me solve the issue.

[telecastg]

You're very welcome

[bandtank]

Thank you for the tip. The problem was in the data function. I did not realize the data function is called as part of rerender. For anyone else who has this issue, be sure to create class variables to hold and update values instead of relying on the options variable, which is set when the view is created. I was using values in this.options.periods instead of this.periods - the latter of which was not being assigned to the object returned by the data function.