Loop in jade with curly brackets - html

I am really struggling to master Jade. I want to do something very very simple: print out "some text" 3 times. I have a mixin function:
mixin outputText()
- for (var i = 0; i <= 3; i++)
span some text
This works fine. Now when I try to output more text on a second line, so first I need to use {} as later there will now be 2 spans on 2 different lines. So first, surrounding current function with curly brackets:
- for (var i = 0; i <= 3; i++){
span some text
- }
But I get the error: unexpected token "indent"
I have seen someone here doing the EXACT same thing. Why wont it work for me?

Might I recommend iteration? If you are working with values this is perfect:
ul
each val, index in ['zero', 'one', 'two']
li= val
li= Some Text
However if you are simply looking to repeat lines over you could do this:
ul
while n < 4
li= Sometext
A handy guide by Jade

Try it. When your function have surrounded with curly brackets, you don't append indent within for-loop code
- for (var i = 0; i <= 3; i++){
span some hello
- }

Related

Blazor shown wrong HTML character codes

I am using a complex object whose values are represented with Blazor. Among others there is a list of strings. Some strings contain a bullet, but these are represented as rectangles.
How can I manipulate the display so that the bullets are displayed?
My string:
razor file:
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i])</div>
}
The bulled at the html page:
You could replace • with the HTML equivalent •
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i].Replace("•", "•"))</div>
}
Then casting it as MarkupString should render it properly.
I've tried to imitate the same string data as you have, and, unfortunately, I could not reproduce this issue. It is pretty hard to tell where is the problem: CSS, fonts, metatags, string itself or something else. Anyways, according to the positive reaction to Waragi's suggestion, you could try some of these options:
Try to put bullet point HTML Unicode outside of your razor parentheses, like this:
<div class="searchHighlight">•#((MarkupString)item?.Highlight.Replace("•", ""))</div>
Also, you can avoid adding a bullet point HTML Unicode above by adding some styles to searchHighlight:
<div class="searchHighlight">#item?.Highlight.Replace("•", "")</div>
<style>
.searchHighlight::before {
content: "\2022";
}
</style>
I hope it helps!

How to avoid additional whitespaces and "\r\n" being inserted in render tree in Blazor

For following example codes
<div>
#for (int i = 0; i < 10; i++)
{
<span class="#classes[i]">#i</span>
}
</div>
What I want to display is (with each character in different style)
01234567890
but what actually display is (additional whitespace between each characters)
0 1 2 3 4 5 6 7 8 9
I use ILSpy to investigate what happens in the render tree, and found following
__builder.OpenElement(2, "div");
__builder.AddMarkupContent(3, "\r\n");
for (int i = 0; i < 10; i++)
{
__builder.AddContent(4, " ");
__builder.OpenElement(5, "span");
__builder.AddAttribute(6, "class", classes[i]);
__builder.AddContent(7, i);
__builder.CloseElement();
__builder.AddMarkupContent(8, "\r\n");
}
__builder.CloseElement();
The sequence 4 adds additional whitespaces and sequence 8 adds "\r\n", which I believe is the reason of the additional whitespace between characters.
I could mitigate the issue by writing in this way
<div>#for (int i = 0; i < 10; i++)
{<span class="#classes[i]">#i</span>}
</div>
However, when there are more and different contents in the same line, the code would be very long. Also when I press Ctrl+D to format the document, in some scenarios VS would "fix" the code in wrong way.
I would like to see if there's any better suggestion for this issue. I thought about following (but couldn't find solution yet)
Use CSS to ignore whitespaces and \r\n between spans
Somehow add extra #{} to help formatting.
Some magic parameter to avoid whitespaces and \r\n added to the render tree.
I guess you are still using aspnetcore 3.x, as this was fixed in .NET5.
Try it in a .NET5 Blazor project - it should work fine.

Looping through an array to display a quote

Attempting to loop through this array, stored in a JSON file. I want to be able to check if a quote is saved and then display it depending on whether it is saved or not.
_toggleCheck() {
var checked = !this.state.checked;
this.setState({ checked: checked });
// For loop to run through arrray and update booleans
for(int i = 0; i<quotesArray.length-1; i++;){
quotes.quotesArray[i].isSaved = checked;
}
this.props.onChange && this.props.onChange(this.props.name, checked);
}
In attempting to do this, I have come across this error and can not resolve it. Line 63 is the beginning of the for loop. I dont know how to use a for loop in react native and cant find any tutorials on line.
for(int i = 0; i<quotesArray.length-1; i++;){
^ remove this semicolon
By the way, are you sure you want i < quotesArray.length - 1 instead of i < quotesArray.length? You're skipping the last element when you add -1.

split data(Text) of a text field into two strings, and use each string on different section of a visualforce page

I have an account with a Note in notesandattachment related list.
I want to display the text of 8 lines, out of 50 lines on a section of visualforce page.
And remaining 42 lines in another section of same visualforce page.
what i know :
I need to split the notes.body into two substrings. One, with 8 lines of text and second one with 42 line.I need to use div tags to get this done on the visualforce page. I might be wrong.
Please suggest me, how do i achieve this.
Appreciate the help.
You can split the text in controller by using split() method like this
String allLines[] = allText.split('\n');
String first8Lines = '';
String restLines ='';
for(Integer i =0; i<8 ; i++){
first8Lines += allLines[i];
}
for(Integer i =7; i<50 ; i++){
restLines += allLines[i];
}
And then put {!first8Lines} in one place and {!restLines} in another

selecting the last node from a list of matches

I'm trying to figure out a way of finding the last node that matches a given xpath using last() function. The problem is that the last element of path also has a constraint specified.
"//div[#id='someId']/ul/li/div[#class='class1 class2 ']/span[#class='someType2 ']"
if I use
"//div[#id='someId']/ul/li/div[#class='class1 class2 ']/span[#class='someType2 ']' and last()]"
it still matches multiple nodes. Maybe one of the reasons is that the last div tag in the path contains 2 span elements. please help me select the last node which matches the above path.
Thanks and Regards,
Vamyip
If your xml is xhtml, why don't use CSS selectors ?
If I'm not mistaken, the selectors should be
#someId > ul > li > div.class1.class2 > span.someType2
#someId > ul > li > div.class1.class2 > span.someType2:last
I was using xpath on html pages too, but when CSS selectors became widespread I found that they are more supported across browsers than xpath.
Use:
(//div[#id='someId']/ul/li/div[#class='class1 class2 ']
/span[#class='someType2 '])
[last()]
Do note: the brackets surrounding the expression starting with //. This is a FAQ. [] binds stronger than // and this is why brackets are necessary to indicate different precedence.
In selenium, you can also use javascript to retrieve elements. How about something like this?
dom=var list1 =
document.getElementById('someId').
getElementsByTagName('li');
var finallist = new Array();
for (var i=0; i<list1.length; i++) {
var list2 = list1[i].getElementsByClassName("class1 class2");
for (var j=0; j<list2.length; j++) {
var list3 = list2[j].getElementsByClassName("someType2");
for (var k=0; k<list3.length; k++) {
finallist.push(list3[k];
}
}
}
finallist.pop()
http://seleniumhq.org/docs/04_selenese_commands.html#locating-by-dom