I keep seeing this in an html code Im looking at. Apparently its Jquery tags to add html templates.
{{#Foo}}
<div> bla bla </div>
I guess class Foo??
and
{{^Foo}}
<div> bla bla </div>
What is ^ for??
Now I know what it does, it stores HTML element in variable Foo, then these HTML elements get added later on. but I don't know how it works or why its # and ^ or anything more about what's going on here...
thank you for any help.
Im using html + javascript codes.
It's actually not jQuery Template (as you suggest), but Mustache used here. This syntax...
{{#Foo}}
...something
{{/Foo}}
{{^Foo}}
...something
{{/Foo}}
... is used to cover both cases:
when Foo collection is not empty, it will be templated with inner block of {{#Foo}} normal section:
when Foo collection is empty, the template of so-called inverted section (set within {{^Foo}}) will be used instead:
Example from the documentation:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
It's actually quite useful: we often need to provide a separate template for 'no items' case. Usually it's done with something like {{#if... }} ... {{#else}} blocks, but this injects logic in templates. Mustache provides an alternative - and quite elegant, may I say - approach to this.
My friend.. you've got lot more to learn about Handlebars first.
Check these links:
http://handlebarsjs.com/block_helpers.html
http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
http://www.raymondcamden.com/index.cfm/2012/4/19/Demo-of-Handlebars-and-why-you-should-consider-a-templating-engine
This doesn't look like jQuery syntax.
This does however look like most templating engines' syntax, such as underscore.js, handlebars, or twig.
This is neither HTML nor jQuery. It's used by template engines or other scripts to do some work based on codes they are able to recognize in the source code of the document (for example beginning and ending with double curly braces in your case).
Related
Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"
Working with Polymer Project markup, the <element> and <polymer-element> tags take an attribute called attributes to publish things in the custom element (1).
This causes problems in jade, since since #617 attributes as an attribute name is treated specially. Is there a workaround for this in Jade?
After the recent update to jade (v1.0.0 and greater) attributes is no longer special cased. As such you can just write:
polymer-element(attributes='foo bar')
results in:
<polymer-element attributes="foo bar"></polymer-element>
If you want to try it out in your browser you can do so at: http://jade-lang.com/demo/
Just put a '\' before the attributes-attribute, like so
polymer-element(\attributes='foo bar')
It was just a guess, but it worked. Can't find any reference in the documentation on this.
So consider it as a work around.
I don't know if this helps in your particular situation, but note that you can use an object property called publish in your prototype in place of the attributes attribute on the <polymer-element>.
E.g.
<polymer-element attributes='foo bar'...>...
is equivalent to
<polymer-element...>...
<script>
Polymer(..., {
publish: {
foo: null,
bar: null
}
}
That way you should be able, at least, to write your own elements without bumping into Jade syntax.
Just to keep this answer up-to-date, attributes is no more reserved in jade :).
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 3 years ago.
I'd like to add an area to a page where all of the dynamic content is rendered as plain text instead of markup. For example:
<myMagicTag>
<b>Hello</b> World
</myMagicTag>
I want the <b> tag to show up as just text and not as a bold directive. I'd rather not have to write the code to convert every "<" to an "<".
I know that <textarea> will do it, but it has other undesirable side effects like adding scroll bars.
Does myMagicTag exist?
Edit: A jQuery or javascript function that does this would also be ok. Can't do it server-side, unfortunately.
You can do this with the script element (bolded by me):
The script element allows authors to include dynamic script and data blocks in their documents.
Example:
<script type="text/plain">
This content has the media type plain/text, so characters reserved in HTML have no special meaning here: <div> ← this will be displayed.
</script>
(Note that the allowed content of the script element is restricted, e.g. you can’t have </script> as text content (it would close the script element).)
Typically, script elements have display:none by default in browser’s CSS, so you’d need to overwrite that in your CSS, e.g.:
script[type="text/plain"] {display:block;}
You can use a function to escape the < >, eg:
'span.name': function(){
return this.name.replace(/</g, '<').replace(/>/g, '>');
}
Also take a look at <plaintext></plaintext>. I haven't used it myself but it is known to render everything that follows as plain text(by everything i mean to say it ignores the closing tag, so all the following code is rendered as text)
The tag used to be <XMP> but in HTML 4 it was already deprecated. Browser's don't seem to have dropped its support but I would not recommend it for anything beyond quick debugging. The MDN article about <XMP> lists two other tags, <plaintext> and <listing>, that were deprecated even earlier. I'm not aware of any current alternative.
Whatever, the code to encode plain text into HTML is pretty straightforward in most programming languages.
Note: the term similar means exactly that—all three are designed to inject plain text into HTML. I'm not implying that they are synonyms or that they behave identically—they don't.
There is no specific tag except the deprecated <xmp>.
But a script tag is allowed to store unformatted data.
Here is the only solution so far showing dynamic content, as you wanted.
Run code snippet for more info.
<script id="myMagicTag" type="text/plain" style="display:block;">
<b>Hello</b> World
</script>
Use Visible Data-blocks
<script>
document.querySelector("#myMagicTag").innerHTML = "<b>Unformatted</b> dynamic content"
</script>
No, that's not possible, you need to HtmlEncode it.
If your using a server-side language, that's not really difficult though.
In .NET you would do something like this:
string encodedtext = HttpContext.Current.Server.HtmlEncode(plaintext);
In my application, I need to prevent HTML from rendering
"if (a<b || c>100) ..."
and
"cout << ...".
Also the entire C++ code region HTML must pass through the GCC compiler with the desired effect. I've hit on two schemes:
First:
//<xmp>
#include <string>
//</xmp>}
For reasons that escape me, the <xmp> tag is deprecated. I find (2016-01-09) that Chrome and FF, at least, render the tag the way I want. While researching my problem, I saw a remark that <xmp> is required in HTML 5.
Second, in <head> ... </head>, insert:
<style type="text/css">
textarea { border: none; }
</style>
Then in <body> ... </body>, write:
//<br /> <textarea rows="4" disabled cols="80">
#include <stdlib.h>
#include <iostream>
#include <string>
//</textarea> <br />
Note: Set "cols="80" to prevent following text from appearing on the right. Set "rows=..." to one more line than you enclose in the tag. This prevents scroll bars. This second technique has several disadvantages:
The "disabled" attribute shades the region
Incomprehensible, complex comments in the code sent to the compiler
Harder to understand
More typing
However, this methhod is neither obsolete nor deprecated. The gods of HTML will make their faces to shine unto you.
I had code like this:
{exp:channel:entrieschannel="blog_channel"limit="10"}
<h1>{entry_title}</h1>
<p>{entry_body}</p>
<p>{entry_author}</p>
{/exp:channel:entries}
Basically I want the HTML content with the exp tags to be made separate and placed in a template file. I attempted this by doing this:
{exp:channel:entries channel="blog_channel"limit="10"}
{embed="blog/post"}
{/exp:channel:entries}
My problem is the output all the tags ({entry_title}, {entry_body} etc etc) are being shown literally and the they are not being treated as a variable.
How can I fix this?
Thanks,
Peter
For what it appears you're looking to do, i might suggest avoiding an embed and instead using a snippet. They're more efficient but still allow you to have the same markup used in more than one template, for example, so you don't have to repeat yourself. Some something like this:
{exp:channel:entries channel="blog_channel" limit="10"}
{sn_blog_post_list}
{/exp:channel:entries}
And then in your snippet, which in this case is called "sn_blog_post_list":
<h1>{entry_title}</h1>
<p>{entry_body}</p>
<p>{entry_author}</p>
This would allow you to use the same snippet for different instances of the entries loop. SO in a different template, you could do something like:
{exp:channel:entries channel="blog_channel" limit="30"}
{sn_blog_post_list}
{/exp:channel:entries}
And so this would again apply the exact same markup to each blog entry, but return 30 entries instead of 10 as with the earlier example without having to repeat the markup.
Hope that helps.
I am trying to search/select a link in a page that is underlined, while others are not. The source is something like this:
<a href="someurl1">
<b>
<u>Some ulined text</u>
</b>
<u></u>
</a>
<br>
Other link text
<br>
Another Link text
<br>
I tried something like
link = browser.link(:u?, true)
link.exists?
I get the following errors
TypeError: expected one of [String, Regexp], got true:TrueClass
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:152:in `check_type'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:189:in `normalized_selector'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:188:in `each'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:188:in `normalized_selector'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:76:in `find_first_by_multiple'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:33:in `locate'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:260:in `locate'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:247:in `assert_exists'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:31:in `exist?'
Edit:
So I am actually using this for screen scraping rather than testing. That may explain the reasons why watir does not support this directly since CSS and other better practices make sense for testing and when you the HTML development and testing go hand in hand. Hoserver from a scraping perspective, the text formatting is what the user sees, and searching underlined, bold links etc. make sense for scraping.
I've never seen that kind of attribute used in a test case before. I also haven't seen any code support for it. You may have to roll your own. Here is an example borrowed from Zeljko
def hasUnderlined(browser)
s = false
browser.links.each do |l|
if l.html.downcase.match /\<u\>*\<\/u\>/
s = true
end
end
end
def getUnderlined(browser)
browser.links.each do |l|
if l.html.downcase.match /\<u\>*\<\/u\>/
return l
end
end
end
I don't think what you want is possible directly because the underline is not an attribute of the link tag, but a formatting tag that apples to just the text in the link.
However, in modern web pages, formatting is often controlled by a combination of CSS and attributes such as class names, which ARE something you could specify when identifying a link. So IMHO your best bet here might be to talk a little with your developers about how they are coding the site and see if they are perhaps open to increasing the testability of their code by using slightly more modern techniques for controlling what links are underlined, such as say using CSS and basing the underlining on a class name. (There's a lot of other good reasons to use CSS for controlling formatting instead of embedding it directly in the HTML, but unless your guys are fresh off the html-banana-boat so to speak, they should not need to be taught why using CSS is a good thing)
That would let you search for a link according to the class attribute that was being used to cause CSS to underline the text
If your developers are not open to such an approach to make their code more testable, then I think your only option is going to be to create your own ruby code for this and modify your copy of water (see #Dave's answer), and then be prepared to maintain that custom patch any time you update watir etc.
So, the only thing you know about a link is that it is underlined?
I thought this would do it (using the latest watir-webdriver gem):
browser.link.u.click
But I got this:
NoMethodError: undefined method `u' for #<Watir::Anchor:0x00000100cbb3c0>
Jari (watir-webdriver developer) said he thinks u tag is not in HTML spec.
By the way, this works:
browser.link.b.click
Jari suggested trying xpath, but I thought css selectors would be nicer to read. Here it is:
browser.element(:css => "a b u").click