I am a Java developer who recently started to learn about the Play Framework. I have been trying to get the below template working but cant seem to get it. I have got the following in my Scala template
#navItem(label: String, link1: String) = {
#{if (Application.isAuthenticated()) {
<li class="active">
label
</li>
}
else {
<li class="disabled">
{label}
</li>
}
}
}
I am calling this later in my template like so
<ul class="nav">
#navItem("Search Documents", "/search")
</ul>
The generated link has href as localhost:9000/#link1 instead of localhost:9000/search. I am not sure whats going on.
PS: If I change my template as below it works fine. But I want to understand why the above template wont work.
#navItem(label: String, link1: String) = {
<li class="#(if (Application.isAuthenticated()) "active" else "disabled")">
#label
</li>
}
Not quite sure about this, but my guess would be the following: The #{ ... } indicates the beginning of a dynamic statement and all of its content is treated as Scala code. Thus, it is a normal if-condition with two strings as a result, both of which are simply returned in the template.
Why are you marking it as a multi-line code block anyway? Have you tried it like this? (note the missing curly braces after the 2nd # sign):
#navItem(label: String, link1: String) = {
#if(Application.isAuthenticated()) {
<li class="active">
#label
</li>
} else {
<li class="disabled">
#label
</li>
}
}
Related
How can i take the value of the data-set attribute or change it in the link with the following structure:
<a href='#' data-set='22'>Text</a>
I know that in jquery I can use the:
$('a').attr ('data-set');
And to change your content:
$('a').attr ('data-set', '01');
But in Ionic4 i am not getting it, already researched and can not exactly that.
Can anyone help me?
In native JavaScript you can just do
To get the attribute use document.querySelector('a').getAttribute('data-set');
And to set the attribute use document.querySelector('a').setAttribute('data-set', '01');
You can use HTMLElement.dataset
assuming you have <a href='#' id="mylink" data-set='22'>Text</a>
let elem = document.querySelector('#mylink');
//get
el.dataset.set
//set
el.dataset.set = "01"
Note: HTMLElement.dataset may not be supported in some browsers, please test it before put it into production
SOLVED:
I did it this way:
<ion-input #myInput data-set="01"></ion-input>
#ViewChild ('myInput', { read: ElementRef }) myInput: ElementRef;
ngAfterContentInit() {
console.log(this.myInput.nativeElement.dataset.dta1);
}
in HTML file,
<ul>
<li #messageEl *ngFor="let message of messages" [attr.data-message-id]="message.id">
{{ message.text }}
<br><button (click)="logMessageId(messageEl)">Console Log </button>
</li>
</ul>
in .ts file,
logMessageId(el){
let messageId = el.getAttribute('data-message-id');
//let messageId = el.dataset.messageId;
console.log("Message Id: ", messageId);
}
I am fiddling around with Gatsby JS using WP as the backend and so far so good. Now I was trying to pull in the menu which for main menu items works just as expected. What I can't really wrap my head around is how to get the submenus pulled in.
The only related thing I found was https://github.com/gatsbyjs/gatsby/issues/2426 which does give me the submenus if I log the data. Just can't get them to be pulled into the menu.
Here is my query in layouts/index.js:
export const query = graphql`
query LayoutQuery {
allWordpressWpApiMenusMenusItems {
edges {
node {
name
count
items {
order
title
url
wordpress_children {
wordpress_id
title
url
}
}
}
}
}
}
`
This is my menu component:
class MainMenu extends Component {
render(){
const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges["0"].node.items
console.log(data)
return(
<div>
<h1>Menu</h1>
<ul>
{data.map((item) =>
<li key={item.object_slug}>
<Link to={item.url}>
{item.title}
</Link>
</li>
)}
</ul>
</div>
)
}
}
export default MainMenu
I tried fiddling around with variations of
{item.children["0"].wordpress_children.title}
but just can't get it to work:/ Any ideas or pointers would be much appreciated!
I just tested this, and your logic is sound all you need is another loop to display subitems. So in your MainMenu.js you can do something like this:
class MainMenu extends Component {
render() {
const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges[0].node.items
console.log(data)
return (
<div>
<h1>Main Menu</h1>
<ul>
{data.map((item) =>
<li key={item.object_slug}>
<Link to={item.url}>
{item.title}
</Link>
<ul>
{item.wordpress_children && item.wordpress_children.map((subitem) =>
<li key={item.wordpress_id}>
<Link to={subitem.url}>
{subitem.title}
</Link>
</li>
)}
</ul>
</li>
)}
</ul>
</div>
)
}
}
This line is very important {item.wordpress_children && item.wordpress_children.map((subitem)
This will check if your menu item has subitems, and if it does it will map them and iterate through them.
I hope this works for you, I tested it and it works.
I need to get node path of jstree element ,I using this code :
$(function () {
$('#jstree').jstree();
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
if (data.action == "select_node") {
var node_path = data.instance.get_path(data.node, "/");
console.log(node_path)
}
});
});
But I get unexpected space character (You can see in console.log() function)
http://jsfiddle.net/3q9Ma/741/
I need a pretty path like this : Folder1/children 1
Please tell me what wrong .
Thank you
The problem actually with the HTML in your fiddle. It looks like this:
<div id="jstree">
<ul>
<li>Folder 1
<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Folder 2</li>
</ul>
</div>
The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:
<div id="jstree">
<ul>
<li>Folder 1<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
<li>Folder 2</li>
</ul>
</div>
Can I execute that line of code
nav = request().path().toString()
inside of scala template like index.scala.html
I would like to have that code to check on witch side is user and to mark it on menu
using code like this in main.scala.html:
<li class="#("active".when(nav == "contact"))">
Contacts
</li>
I would recommend you different approach, create tag - resuable template, which takes Integer as an argument,
it will render menu and mark as an active different menuitem depends on value.
#(menuItem: Int)
<ul >
<li #if(menuItem==1){ class="active" } >
////
</li>
<li #if(menuItem==2){ class="active" }>
</li>
<li #if(menuItem==3){ class="active" }>
///
</li>
</ul>
from your contact page and any other page, call this tag with corresponding value, #views.html.tags.menu(1)
You can define variables like that if that is your question. If it is not your question than please try to explain your problem in more detail.
#nav = { #request().path().toString() }
I would like to generate ID's for an HTML list.
The list is generated dynamically from the database.
I cant use a for loop or the list.zipWithIndex function because my logic contains a few loops for the generation of the list already, in which the counter needs to be incremented too. I also tried it with the defining function, but its not allowed to reasign values like this: #{id = id + 1}
Whats the best way to accomplish the generation of Id's?
Thats part of the template (uniqueId needs to be replaced with an integer):
<div id="tree">
<ul>
<li id="uniqueId">
<a class="dashboard" href="/">Dashboard</a>
</li>
<li id="uniqueId">
<b>Products</b>
<ul id="uniqueId">
#for(cat <- Application.allCategories()) {
<li id="uniqueId">
<a class="name" href="#routes.Categories.getd(cat.id).url">#cat.name</a>
<ul>
#for(prod <- Application.allProducts()) {
<li id="uniqueId">
<a class="name" href="#routes.Product.getById(prod.id).url">#prod.name</a>
</li>
#*more code and the closing tags...*#
Use just ... object's id prefixed to make it unique, example for first listing:
#for(cat <- Application.allCategories()) {
<li id="cat_#cat.id">
for second:
#for(prod <- Application.allProducts()) {
<li id="prod_#prod.id">
or if the same product can be displayed in several categories prefix it with cat.id as well:
#for(cat <- Application.allCategories()) {
<li id="cat_#cat.id">
#for(prod <- Application.allProducts()) {
<li id="prod_#(cat.id)_#(prod.id)">