How to get &#8212 to display as an em dash when interpolating - vue.js

On a page I'm working on, I'm trying to get the title of a blog post to read as Sleep—It's frustratingly Important., where there is an em dash between Sleep and It's. Previously I had this hard-coded as
<h2 class="post-title"><router-link to="/posts/1">Sleep&#8212It's frustratingly Important. </router-link></h2>
which was working fine. I want to generalize this, so in my Rails back end I have the post title stored as Sleep&#8212It's frustratingly Important.. But when I insert the post title via interpolation
<h2 class="post-title"><router-link to="/posts/1"> {{ this.posts[0].title }} </router-link></h2>
It doesn't insert the em dash. It displays as "Sleep&#8212It's frustratingly Important."
Why isn't the html recognizing that &#8212 should be changed to an em dash? And how do I fix this issue?

Content between {{ and }} is expected to be an expression that resolves as plain text. It gets converted into a text node. It does not get treated as HTML.
If you want an em-dash, then use a real em-dash: —.
You could also look at dangerouslySetInnerHTML, but it is named that way for a reason.

Related

rebol parsing html: get error "title has no value"

I'm trying to parse an html page:
url: https://dzone.com/articles/2-entity-framework-alternatives-or-give-me-data
html: read url
parse html [
to {<h1 class="article-title" itemprop="headline">}
thru {<h1 class="article-title" itemprop="headli
ne">}copy title to {</h1>}
]
probe title
Can't see why it doesn't work since I get error "title has no value"
I assume that you're using Rebol/view since the free versions don't do https though rebol3 does.
If you want to see if something is working you should look at the return value of the parse, and you'll see it's false which means that there's a problem with your parse rule. Anyway, this works for me though the quotes around the tags are not necessary as < and > are both string delimiters.
>> parse html [
thru <h1 class="article-title" itemprop="headline">
thru <h1 class="article-title" itemprop="headline">
copy title to </h1> to end
]
== true
>> trim/head/tail title
== "2 Entity Framework Alternatives (or Give Me Data!)"
It does not work most probably because the first to stops before the matched string, so that thru starts at the beginning of the first occurence of <h1 ...>, not at the second as you might have expected. You need to skip the first occurrence, before trying to search for the second one. You can achieve that using two thru rules as shown in another answer, or just repeat the rule twice to avoid duplicating it:
parse html [
2 thru <h1 class="article-title" itemprop="headline">
copy title to </h1> to end
]
Notice the final to end rule, which will make parse return true if your rules succeed in reaching the end. The to end rule is a placeholder rule, as you do not care about what is following </h1>, but want to reach the end of the input anyway.
EDIT: Testing the code you submitted works fine from here unchanged. The editing of your question has actually fixed the cause of the error. I can reproduce your issue with your original code.

nightwatchjs selector is not selecting an attribute with space

I have a few pages on which I am running nightwatchjs to execute an end to end test.
<div role="tab" aria-selected="true" title="My TV"><span>MyReal TV</span></div>
I have a few tabs that I try to verify using code similar to below:
.verify.elementPresent('div[role="tab"][title="Portfolio"]', 1000)
The above works fine for the Portfolio tab. However, I have two tabs that fail and is returning not found. My Tv and Daily Report . Below fails for My Tv:
.verify.elementPresent('div[role="tab"][title="My Tv"]', 1000)
The Daily Report fails as well. I am wondering if it has something to do with the space in my title? Is there anything else I am doing wrong?
It turns out the url was wrong in my case. It was frustrating, spent hours to learn this.
Something like below was returned for the url
http://stackoverflow.com//questions
Instead of
http://stackoverflow.com/questions

protractor getText returns empty string for non-empty element

I have issues getting the text from an element in protractor. For other elements of the page it works as expected, just not for this one :/
<p class="error theme-info-i ng-binding ng-scope" ng-if="firstFormError && form.$invalid" ng-click="goToErrorField(firstFormError)">
<span class="emphasize ng-binding">User ID</span> (The user ID is required.)
</p>
I can locate both elements without problems using by.className, and getInnerHtml/getOuterHtml works as expected. However getText returns an empty string for both.
Found the reason ... its a two-step registration where the first step has the same notification area and just gets hidden. For reasons beyond my comprehension the devs update both notification areas (not just the one on the current page), so inner/outerHtml just seemingly returned the "correct content" and because the first area was hidden, getText returned empty as by spec.
I think I'm gonna file some internal bug report now wtf we are doing with those notifications ;)
You can try
var firstName = element(by.model('firstName'))
expect(firstName.getAttribute('value'))
This gives you the value of the input box.
Had the same problem.
expect(element(By.css('span.emphasize.ng-binding')).getAttribute('textContent'))...
Seems to work just fine for me (this of course if you have only one span with those classes or is the first one. else you need to be more specific. But anyway if you still need to solve the problem try with .getAttribute('textContent') )

Interactive Report Title defaults to 'Applicaiton'

I have an Interactive Report that displays Images in one column. The images are displayed directly from Images I loaded into shared components.
The report query:
SELECT
Tbl_P.ImagePackage,
Tbl_P.PRICE as PACKAGE_PRICE,
Tbl_I.ID,
Tbl_I.Name,
Tbl_I.PRICE,
Tbl_I.Type || Tbl_I.Name as Minifigure,
Tbl_I.Quote as QUOTE,
'AddToCart.png' as ADD_TO_CART
from "Tbl_090_ImagePackages" "Tbl_P"
left outer join "Tbl_091_Images" "Tbl_I"
on Tbl_P.ID = Tbl_I.Image Package
where Tbl_P.ID = :P201_GROUP
The column in question is 'ADD_TO_CART'.
The Column attributes are as follows:
Display Type: Display as Text(escape special characters)
Link Text:
<img src=#APP_IMAGES##ADD_TO_CART# alt=Application Express height=30 width=30
Link Attributes:
ID=#ID# class="AddToCart"
Target: Page in this Application (Current Page)
The Title is defaulting to 'Application' and I can't get rid of it or change it. I have tried changing the Link Attributes to: title="Testing" ID=#ID# class="AddToCart" Unfortunately this has not worked. Any help would be much appreciated.
Thank you
Seems like your link text is malformed? Put your attributes between quotes, single or double. When you view your page source with eg Firefox, you'll notice strings highlighted in red: these are invalid html. The browser is forgiving up to a certain point, but if you confuse it enough things like this may start happening.
<img src="#APP_IMAGES##ADD_TO_CART#" alt="Application Express" height=30 width=30 />

Trying to display an image in a razor view being converted to HTML in winform app

I'm using the Razor View Engine to Generate HTML outside of a MVC app (In a win forms)
Most of my Razor Views work pretty logically, but I'm having issues displaying an image.
I'm trying to display a PNG image that's been retrieved from a database. Since I'm in a winforms app a lot of the helper functions I'd normally use are absent, so I'm trying to do it inline.
string base64 = Convert.ToBase64String( #Context.Model.ETA640StudentProfileVM[ currentRecord ].ImageObj );
imageBytes);
<img src="#String.Format( "data:image/png;base64,{0}", base64 )" />
But when I evaluate this code to display the image using the code above, which I got here:
StackOverflow Article
I get this error out of the Razor Renderer
Line: 305\t Col: 1\t Error: The name 'WriteAttribute' does not exist in the current context
called like this:
return RenderTemplate(sourceCodeReader, referencedAssemblies, context, null);
The Razor engine is what is throwing the error... All my other HTML works fine so far...
Here is the code the Razor View Engine is outputting for the statement (from the error text)
WriteLiteral(" <img");
WriteAttribute("src", Tuple.Create(" src=\"", 6855),
Tuple.Create("\"", 6915) , Tuple.Create(Tuple.Create("", 6861),
Tuple.Create<System.Object, System.Int32>(String.Format(
#"data:image/png;base64,{0}", base64 ) , 6861), false) );
WriteLiteral(" />\r\n");
As you can see, the WriteAttribute is inside the Quotes for the WriteLiteral statement...
This seems pretty evidently incorrect.
Anyone got any idea why that pair of lines causes the Razor engine to Puke?
Has anyone used the Razor engine to generate HTML to display a PNG frim the Database and had it work outside of an MVC app?
(P.S. I had another question that approached this same error from a much worse perspective, that question has been deleted)
Edit: For those who follow, the issue appears to be directly related to parsing a variable in the path of an image tag.. for example this works perfectly.
<img src="D:\Project Files\EFolderReportGenerator3G\WinForm\EFolderReportGenerator3G\bin\Debug\Tmp.png" border="0" height="155" />
But this dies horribly (both double slashing and using the #"" string literal way of dealing with the '\' chaaracters)
#string path = "D:\\Project Files\\EFolderReportGenerator3G\\WinForm\\EFolderReportGenerator3G\\bin\\Debug\\Tmp.png";
<img src="#path" border="0" height="155" />
Now I'm trying to solve the relative path issue so my solution is portable.
The code:
<img src="#String.Format( "data:image/png;base64,{0}", base64 )" />
Isn't being parsed correctly by StackOverflow because of the quotes for the src attribute and the Format method argument aren't obvious, I'm not sure if the Razor engine can follow either. Maybe you could try moving the string format to an assignment and reference that variable instead of calling the method inline like that. It might at least reveal more about the problem.