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.
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.
As my ROOT_URL differs in Dev and Prod environments I am rtying to use the Meteor.settings functionality to set my href values correctly.
Because links are used all over the application, it seemed a natural candidate for a helper on the body template. It is defined like so:
Template.body.helpers({
rootURL: Meteor.settings.public.root_url
})
and in the template it is used like so:
<li class="{{guessesActive}}">
<a href="{{rootURL}}guesses" class="waves-effect waves-light">Guesses
<span class="sr-only">(current)</span>
</a>
</li>
But the value of Meteor.settings.public.root_url is not appended to the anchor.
I think you just need to add as a registered helper instead of appending to the body. Template.registerHelper('rootURL', function() {...}); Then return the appropriate value. Meteor docs have more on registerHelper.
It turns out I misunderstood the body template. I thought it was meant to be accessible for all. It runs out this is not the case. It is meant to allow using helpers directly in the <body> tag.
To set global helpers, define a global variable called Helpers and assign it an object with the functions and variables you want accessible.
As explained in this post https://stackoverflow.com/a/28837834/763962
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.
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>
}
I'm fairly used to razor now, but I can't understand why the following syntax is correct?
<li #(active ? "class=active" : "")>
#Html.ActionLink(item.Text, item.TargetAction, Model.Controller)
</li>
As you can see I'm conditionally applying a class (and I've written it this way so the class tag is not generated if the bool active == false).
What I can't understand is why this then generates the correct quotes to give:
<li class="active">Home</li>
Home
</li>
Somehow it is magically sorting out the quoting, but I can't find any reference in the articles on razor to suggest this is expected, so I'm wondering if it is relying on broken behaviour. If I add single or double quotes into the string around the word 'active', as you would expect to if cranking out html, I end up with:
<li class="'active'">
Home
</li>
or
<li class="active">
Home
</li>
Why does it work this way, and is my code correct (as opposed to simply functioning)?
Just come across this so thought would answer - SLaks looks right with Html.Raw, but the OP is also correct in that the second method doesn't look to work - the "s get encoded.
My solution was:
<li#(active ? Html.Raw(" class=\"active\"") : null)>
Razor automatically HTML-escapes all code output.
You can prevent this by writing #Html.Raw(...)
Alternatively, you can put the quotes in the literal text:
<li class="#(active ? "active" : "")>
Your example works because you don't actually have any quotes.
The generated HTML source reads <li class=active>.
Just came across this bizarre behavior as well. Logically the following should work.
#(Model.IsTablet ? "data-options='is_hover: false'" : "")
but is rendered as
data-options="'is_hover:" false'=""
As Dan states this works correctly
#(Model.IsTablet ? "data-options=is_hover:false" : "")
rendering as the first example should.
data-options="is_hover:false"
but if you add a space in the attribute it breaks whatever weird stuff asp.net 4.0 is doing and it thinks your attribute ends at the space.
And this does not constitute html escaping as what is valid html syntax doesn't work and the whole point of razor is that the razor syntax should work with valid html not break it.