0

An app I'm building shows email accounts in a sidenav as a dropdown (or accordion) as described here.

The dropdown works fine when the data exist on load time, thanks to the UIkit observer.

The code looks something like this (simlified):

<div id="app_wrapper" data-uk-observe>
    <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav data-uk-observe>
        {{#each mailAccounts}}
        <li class="uk-parent ct-mail-account-side-nav-entry">
            <a href="#">user@domain.tld</a>
            <ul class="uk-nav-sub">
                <li><a href="#"><i class="uk-icon-inbox"></i> Inbox</a></li>
                <li><a href="#"><i class="uk-icon-folder"></i> Sent</a></li>
                <li><a href="#"><i class="uk-icon-folder"></i> Trash</a></li>
                <li><a href="#"><i class="uk-icon-folder"></i> Spam</a></li>
            </ul>
        </li>
        <li class="uk-nav-divider"></li>
        {{/each}}
    </ul>
</div>

When adding new accounts through a meteor method, the entry appears yet the dropdown is stone dead. Only if the template is completely rerendered it comes to life. That usually requires a little detour to some other page where the menu doesn't exist.

  • How can I make the observer aware of the change?
  • Why doesn't the observer notice the change and apply it's magic to the newly created entry?
  • Is there a way to manually assign the JavaScript dropdown magic to the newly created element?

UIkit Version: 2.19.0

rgeber
  • 551
  • 5
  • 6

1 Answers1

0

Meteor uses ractive variables to modify DOM at runtime. What this means is that your mailAccounts need to be a ractive variable. There are two cheap (in terms of effort) methods to achieve this

  1. Define mailAccounts as a session variable
  2. Have mailAccounts be part of a collection

There is a third way as well, if you don't mind writing some more code. Use ractiveVar package and define mailAccounts as a reactiveVar.

Adnan Y
  • 2,982
  • 1
  • 26
  • 29