How to make conditional tag in Handlebars?
Knowing only about #if helper, it will be:
<{{#if customTag}}{{customTag}}{{else}}div{{/if}}>
content
</{{#if customTag}}{{customTag}}{{else}}div{{/if}}>
More elegant solutions?
Related
When there is a link present, we want something like this HTML:
<img src="{{src}}"></img>
When there is no link present, we want something like this HTML:
<img src="{{src}}"></img>
Is there a clean way to do this? I consider the following solution bad, because it's dangerous to have to separately remember to open and close the <a> tag:
{{#if url}}<a href="{{url}}" title="{{title}}" target="_blank">{{/if}}
<img src="{{src}}">
{{#if url}}</a>{{/if}}
I considered using a block helper, but can't think of how to do so without adding more complexity. Maybe something like:
{{#linkWrap url}}<img src="{{src}}">{{/linkWrap}}
But then it's hard to see how we set the title and target and everything gets awkward.
I think you are on the right track, but I would recommend using a Handlebars Partial Block instead of a Block Helper. This will allow to pass one piece of template (the block) to another piece of template by which it will be wrapped (the partial).
Handlebars provides us with {{> #partial-block }} as a way to render a block of template within a partial. We can use this to create our "linkWrap" partial:
{{#if link}}
<a href="{{link.url}}" target="{{link.target}}" title="{{link.title}}">
{{> #partial-block}}
</a>
{{else}}
{{> #partial-block}}
{{/if}}
This gives us a clean and simple partial that will allow us to wrap any section of our template with a link as long as we have a link object to pass to our partial. Note that I have opted to use an object to represent the link so that I can pass a single parameter to the partial instead of passing the url, title, etc. properties individually.
For anywhere we wish to render a link around some markup in our template, we can do so in the following way:
{{#> linkWrap link=link}}
<img src="{{image.src}}">
{{/linkWrap}}
If the link object is null or undefined, the img element will be rendered without a parent anchor element.
I have created a supplementary fiddle for reference.
Trying to learn about Handlebars custom block helpers and conditional helpers, I've created a simple example on jsfiddle. The custom helper returns true but the conditional expression doesn't appear to respond correctly to the value passed out of the block helper
<script id="test" type="text/x-handlebars-template">
<h3>{{title}}</h3>
<p>custom helper returns: {{isCategory}}</p>
<p>conditional result: {{#if isCategory}}yes{{else}}no{{/if}}</p>
<p><em>I would expect the result to be 'yes'</em></p>
</script>
What's not happening properly in this example?
Your conditional {{#if isCategory}} is looking for isCategory in your data object, and since it doesn't exist.. False/No.
The conditional block will not evaluate your custom helper, it will only look in your data object passed in to the template.
I have the code below and I need to pass an html element (anchor) as shown. I have tried using filters like raw and escape but it always prints out the html element as regular text. I also tried setting a new variable that contains the same string text and passed that to testLink and then applied filters to it, but same result. Any ideas how to tackle this problem?
{% include 'example.html.twig' with {'testLink': 'Hurry, Click me NOW'} %}
You cannot handle your problem in the template that is including the example.html.twig template as autoescaping will step in when the passed value is displayed in the included template. Instead, you will have to use the raw filter in example.html.twig (be careful with that solution though as the template is probably used in other places too which might not be safe).
How can I print HTML code inside a Meteor template using handle/spacebars?
When I try to manipulate the <div> element using a simple variable containing a style="" code, it generates an error. For example:
<div {{style}}>
// Something in here.
</div>
Will fail if {{style}} is something along the line of 'style="something: something;"' set from the Template.helpers.
How can I print HTML code inside the template?
What you're trying to do here in particular:
<div {{style}}>
<!-- Something in here. -->
</div>
With {{style}} evaluating to 'style="key: value;"' is impossible in Blaze, however it will work if {{style}} evaluates to an object {style: "key: value;"}. Alternatively, this will also work:
<div style="{{style}}">
<!-- Something in here. -->
</div>
With {{style}} evaluating to the string key: value.
The triple brace {{{helper}}} cannot be used to insert attributes, but it can otherwise be used to insert arbitrary HTML nodes without escaping. If you use it, be sure you aren't opening up an XSS hole.
See this meteorpad.
I don't know if it's possible to use variables inside an HTML tag, but if want to pass HTML code from your variable to the client, simply use {{{variable}}} instead of {{variable}}.
I have an HTML Helper that essentially renders static content read from HTML files (inside of a vdir). There are cases when the HTML file has a title element defined and in such cases, the current page should use the given title. The content inside of the body should be rendered where the Helper class is referenced in the View.
This is how I call the helper.
<%=Html.StaticContent("staticcontent.htm",
new List<StaticContentTag>()
{
new StaticContentTag()
{TagKey=ReplaceTags.MarketName,
TagValue = "Austin"}
}, Model, true) %>
I'm passing in the ViewModel so that I can set the title and the last parameter is a flag that says whether to force the title or not.
The head has the title defined like this.
<title><%=Model.Title%></title>
I know what I'm doing wrong here by referencing the Model.Title element before even calling the helper. Any ideas on how I can work around this?
i believe ur title tag is rendered before u call the html helper in ur view. the purpose of helpers is to render html tags where they are called not to change contents of already rendered tags that can be done through javascript. however i would not use all that new keywords in my view. rather i would make a view model containing all required information for the view and then i would have no problem writing statement
<title><%=Model.title%></title>