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">
user#domain.tld
<ul class="uk-nav-sub">
<li><i class="uk-icon-inbox"></i> Inbox</li>
<li><i class="uk-icon-folder"></i> Sent</li>
<li><i class="uk-icon-folder"></i> Trash</li>
<li><i class="uk-icon-folder"></i> Spam</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
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
Define mailAccounts as a session variable
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.
Related
I have some recursion in the component template and I need add some functionality to the result html. So I need to wait till the whole html of the component and its nested components are available. What is the right time to add this functionality? Functionality means call jQuery plugin on the result html.
The code looks like:
<template>
<div>
<ul>
<li v-for="category in categories"
:key="category.id"
id="menuItem_{{category.id}}"
data-module="{{category.module?.id ? category.module?.id : 0}}"
>
<div>
{{category.name}}
</div>
<CategoriesList v-if="category.all_children?.length" :categories="category.all_children" />
</li>
</ul>
</div>
</template>
I had a similar situation for my previous project. I was using angular and NxJS and I used observables for doing this.
You can create a dynamic array of observables, init it in the main component, add a subscription and then update them when each component is rendered (in the mounted function for example). When all your array is done, you can then call the function / apply your functionality.
Seems like something like exists in Vuejs: https://jasonwatmore.com/post/2019/04/02/vuejs-rxjs-communicating-between-components-with-observable-subject
or https://www.thisdot.co/blog/introduction-to-vuejs-and-rxjs
I could check out the code tonight and send it to you if you are interested.
Im still learning Angular and I come across an example of using links for routes that I had not seen. Going through the docs on Angular.io, Im using to seeing and using this format:
https://angular.io/tutorial/toh-pt5
template: `
<h1>{{title}}</h1>
<a routerLink="/heroes">Heroes</a>
<router-outlet></router-outlet>
`
Then, I was reading an article here:
http://blog.ng-book.com/basic-routing-in-angular-2/
<a>Navigation:</a>
<ul>
<li><a [router-link]="['home']">Home</a></li>
<li><a [router-link]="['login']">Login</a></li>
<li><a [router-link]="['dashboard']">Dashboard</a></li>
</ul>
What is the difference?
First example you provided, the data is passed as a raw value, therefore it can be set as a static value
Second example, it can be bound to a variable from the component, not necessarily, it's just a different way which offers more flexibility of what you can do with the router.
They would both deliver you the same result if you simply type in a raw value, but if you need a value from the component, for example, retrieve a value from the database, the second one would be more ideal.
I am trying to create an event-based rule on Adobe DTM so that an event is recorded anytime a menu li class changes from "item" to "item-active". The report should return the data-reference or data-index value of the item-active li.
<div class="menu">
<ul class="list">
<li class="item" data-reference="#chapter1" data-index="1">
<div class="number">1</div></li>
<li class="item-active" data-reference="#chapter2" data-index="2">
<div class="number">2</div></li>
<li class="item" data-reference="#chapter3" data-index="3">
<div class="number">3</div></li>
</ul>
The menu is for a long-form article and the class changes to item-active when a user scrolls down to the specified chapter. How would I go about creating an event-based rule based on the above information?
Thanks
Adobe recently added a condition to event-based rules called "data element changed"
This condition will continuously "listen" for changes to a specified data element value and send analytics any time a value change is detected.
While most often discussed in connection with the AEM Context Tool, you should be able to leverage this "listener" if you can update a data element any time the class value changes (link click, URL hashtag, etc.).
you could use the the event type "pushState or haschange" to check if the hash in the URL has changed, because you work with jump marks.
Or you can use the event type "enters viewtype" if your chapters have different id in the headline/div-tags.
Kind regards
Till
I'm using a bootstrap template for my project while using tabbing when page postback from 2nd tab again first tab shows on. I tried different things but wont work please help.
<div id="validationWizard" class="basic-wizard">
<ul class="nav nav-pills nav-justified">
<li><span>1 :</span> Basic Details</li>
<li><span>2:</span> Family Details</li>
<li><span>3:</span> Previous School</li>
<li><span>4:</span> Document Details</li>
<li><span>5:</span> Registration Details</li>
<li><span>5:</span> Save Details</li>
</ul>
</div>
You will need to maintain the state of the tabs explicitly by saving the current tab index in hidden field and setting current tab after page renders using javascript/jquery. As you are applying tabs style on client-side, server doesn't know about the state of the current active tab. If you use asp.net ajax control toolkit - tab control then ASP.NET automatically maintain the state of the tab.
I'm using the Asp.Net CMS Umbraco and would like some help to determine whether or not there is something specific about the Umbraco CMS that might make the task of creating a multi-colored menu bar... different from standard html and css manipulation.
The menu bar code that I'm using is based upon the friendly-ghost theme shipped with Umbraco.
Now the normal method for employing different colours in a menu would be something like
div # menu ul.rMenu li.page-item-(some number) {background-color: # (whatever);}
...
...
<li class "rMenu-expand page-item-(the same number as above)"><a href="(link to whatever site on the menu)">
<span> Wording for the particular tab </span></a></li>
And bingo... the (some-number) tab has the (whatever) colour!
However, Umbraco seems to be using a different set-up that is not entirely compatible with the above strategy. Should I be looking at *umbTextpage id *parentID *nodeType ... or something entirely different that I haven't, as yet, noticed?
I believe that nodeName is being used for the wording of particular tabs... should I take it, then, that nodeType refers to the tabs themselves ???
That's great, thanks. However, the menu is generated dynamically using xslt. Do you think I should I attempt to insert that code (converted to xslt) into the menu generation process...
<xsl:for-each select="$currentPage/ancestor-or-self::* [#level=$level]/* [#isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:if test="#id = $currentPage/#id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a class="navigation" href="{umbraco.library:NiceUrl(#id)}">
<span><xsl:value-of select="#nodeName"/></span>
</a>
</li>
... or attempt to use razor code after the fact (i.e. have the menu be created and subsequently cycle through the menu's elements, giving a numerical 'tag' to each node)?
The beauty of Umbraco is that you have complete control of the layout. You can have it build your menu how ever you want.
I don't know whether you are using xslt or razor to generate your menu, but If you're looking trying to get a unique number to append to "page-number-" then use the node's Id, that won't change even if the name of the node is edited.
Using Umbraco 4.7 razor you do something like this:
#{
<ul>
#foreach (var node in Model.AncestorOrSelf().Children.Where("Visible"))
{
<li class="rMenu-expand page-item-#node.Id">
<a href="#node.Url">
<span>#node.Name</span>
</a>
</li>
}
</ul>
}