The Ember guide contains the following example code at http://guides.emberjs.com/v1.10.0/templates/links/
A link in {{#link-to 'index'}}Block Expression Form{{/link-to}},
and a link in {{link-to 'Inline Form' 'index'}}.
It uses link-to with and without an #. Why? Which one is correct?
Both of them. {{#link-to 'index'}}Block Expression Form{{/link-to}} allows you to express the link in a block way, like any other html element, for example <p></p>. You can write any string in the middle or even another html element/ember component.
{{link-to 'Inline Form' 'index'}} is an inline mode. The link will look as <a href='/'>Inline Form</a>.
The difference is that in the inline mode you can only type strings like Inline Form and in the block way you can have whatever you want.
Related
I'm making a custom multifield breadcrumb component with this code.
<ul class="breadcrumb-list">
<li class="breadcrumb-item" data-sly-repeat.textItem="${properties.text}">
<a class="breadcrumb-link" href="${properties.link['textItemList.index']}">${textItem}</a>
<p class="works">${properties.link[textItemList.index]}</p>
<p class="doesn't work">${properties.link['textItemList.index']}</p>
<span>//</span>
</li>
</ul>
I've added the paragraph elements to show how my properties display.
This is the html output:
If I remove the single quotes as in p class="works", the value displays the breadcrumb item's link value. If I add the single quotes as in p class="doesn't work", nothing displays.
You'd think that removing the quotes from the same value in the href would display my link as the href; however, when i remove the quotes in the href value, it removes the anchor tag altogether. when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class.
How can I get the href value to show a link?
AEM evaluates al href before rendering the resulting html.
If the link is invalid it will not put anything under href
If the expression is invalid it will wipe out all the section
Have you tested with valid links?
This will not work only with plain text.
when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class. - That is the expected behaviour. Because you have an array of links and putting the quotes will try to obtain an entry in the array by the 'textItemList.index' key, like you would do in a map, instead by the index. Nothing is found of course, so the anchor point is rendered without the href attribute.
when i remove the quotes in the href value, it removes the anchor tag altogether. - That is not the expected behaviour. Since you exemplify that inside the paragraph it works, then I suppose this is a display context issue. HTL should implicitly uses the uri context for href attribute values and text for content inside HTML elements according to the documentation.
Try explicitly mention the context like href="${properties.link[textItemList.index] # context = 'uri'}" or href="${properties.link[textItemList.index] # context = 'text'}", or check the contexts mentioned in the doc - unsafe should ultimately do the job.
None of this context worked for me, and Im facing the same issue, if I remove the single quote "'" it will display the href just ok, but since my href includes it none of the context mentioned above is doing the job.
Is there any solution for this out there?
I am using a third party indexing service (Swiftype) to search through my database. The returned records contains a property called highlight. This simply adds <em> tags around matching strings.
I then bind this highlight property in Ember.JS Handlebars as such:
<p> Title: {{highlight.title}} </p>
Which results in the following output:
Title: Example <em>matching</em> text
The browse actually displays the <em> tags, instead of formatting them. I.e. Handlebars is not identifying the HTML tags, and simply printing them as a string.
Is there a way around this?
Thanks!
Handlebars by default escapes html, to prevent escaping, use triple brackets:
<p> Title: {{{highlight.title}}} </p>
See http://handlebarsjs.com/#html-escaping
Ember escapes html because it could be potentional bad code which can be executed. To avoid that use
Ember.Handlebars.SafeString("<em>MyString</em>");
Here are the docs
http://emberjs.com/guides/templates/writing-helpers/
if you've done that you could use {{hightlight.title}} like wished,...
HTH
I need to display some block depending on the current views variable in comparison to some string:
PSEUDO code is:
{{#if view.someVariable "desiredValue"}}
Hurray desiredValue exists in this view!
{{else}}
Sorry, doesn't match...
{{/if}}
Of course it doesn't work as if statement allows only one param. I tried with custom registerHelper of Handlebars, but it doesn't resolve the view.someVariable, instead uses it as a string (although view.someVariable is defined and has value).
Finally I also tried with Handlebar's registerBoundHelper - it resolves the params BUT doesn't support Handlebar's blocks, what's more tries to resolve the string as an object, so fail again. Pure madness!
My views are very dynamical they depends on many factors also from backend and approach from the pseudo code would be perfect for resolving it. Is there any way to do that?
Edit:
There is a sample of what I want ... http://jsfiddle.net/biesior/dMS2d/ looks quite trivial...
[if] statement inside the each is pseudo code of course
You can just declare a computed property, something like isDesired on your view, which would compare someVariable to your string:
App.MyView = Ember.View.extend({
// ...stuff...
isDesired: Ember.computed.equal('someVariable', 'desiredValue')
});
And have a simple conditional in the template:
{{#if view.isDesired}}
Hurray desiredValue exists in this view!
{{else}}
Sorry, doesn't match...
{{/if}}
For my project, I have a requirement for directives to be defined that do not modify the DOM, and also do not leave artifacts of their existence in the DOM. I seem to be unable to make this work with AngularJS.
Consider these examples:
<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>
With associated directives defined as follows:
var module = angular.module( 'component', [] );
module.directive('emptyArg', function() {
template: '',
replace: true,
scope: false,
link: function() { // ... }
};
module.directive('nullArg', function() {
template: null,
replace: true,
scope: false,
link: function() { // .... }
};
After compilation, I want the resulting DOM elements to look like this:
<div></div>
<div></div>
But the absence of a template seems to cause AngularJS to ignore the replace request, leaving the resulting DOM elements looking like this:
<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>
How can I force AngularJS to get rid of these attributes in the post-compile DOM?
A jsFiddle demonstrating this can be found here:
http://jsfiddle.net/vankirkc/ezN3M/34/
Update:
It is possible to delete the created attributes after they are created, but what I am really looking for is some way to leverage the template definition parameter to intercept the creation of the DOM element such that it doesn't copy this directive across. It appears this isn't possible in version 1.0.3.
Actually "empty-arg" and "null-arg" are just normal attributes of DOM element, AngularJS is using them to mark which directives to apply at element.
So it would be actually bad, if one directive will remove attributes from DOM element. For example - it is possible to write another directive that will use this attributes to modify its behaviour: in different AngularJS libraries you can see, that controls use ngModel attribute to get expression on which element is been bound.
And also as those attributes are already present at DOM tree, deleting them will cause DOM tree modification and can imply performance issue.
If still you actually whant to delete those attributes, you can try to modify second argument of linking function:
attrs.$set('empty',undefined);
But generally I would not recommend to do so: you can save some memory (but I am not sure that it would be saved - I think it should be benchmarked), but you'll get bigger loading time as DOM tree would be modified.
But anyway here is Fiddle to demonstrate that it is possible.
If you want to remove all attributes, you can do it in the compile function:
for(var i=0; i < tElement[0].attributes.length; i++){
tElement.removeAttr(tElement[0].attributes[i].name)
};
Fiddle.
Update: as #Josh pointed out in a comment, removing the attributes will essentially make this a run-once-only directive, and none of the attributes will be available in the link function, making this answer a non-answer/non-solution.
I want to add action points to a page via a template. This requires that the page with the action points contains this code:
<onlyinclude><includeonly>
</includeonly>#AP1 blah</onlyinclude> ... blah blah blah <onlyinclude><includeonly>
</includeonly>#AP2 blah</onlyinclude>... blah
But I want this via a template, so that a user only has to add something like:
{{subst:Action point|<action>}}
using the template: {{Action point}}.
The problem is adding the </onlyinclude> to a page. I can add <onlyinclude> using:
`<onlyinclude><onlyinclude></onlyinclude>`
I've tried adding hidden comments, using <noinclude> and <includeonly> but nothing seems to work.
Any ideas? The solution I'm looking for is where (as the above link explains) I can add text (meeting minutes) with action points on one page, and on another view only the action points.
This is a monstrous hack, but it works. You will need a recent version of MediaWiki that supports safesubst:.
Create the page Template:Startinclude with the content <onlyinclude><onlyinclude></onlyinclude>.
Create the page Template:Endinclude with the content </onlyinclude>.
Create the page Template:Ap with this content:
Head
<includeonly>{{safesubst:Startinclude}}</includeonly>
Body
<includeonly>{{safesubst:Endinclude}}</includeonly>
Foot
And now {{subst:Ap}} expands to this:
Head
<onlyinclude>
Body
</onlyinclude>
Foot
For a live demo, enter {{subst:User:Jpatokal/Ap}} on any Wikipedia page, it uses this template.
Wouldn't <onlyinclude> and </onlyinclude> work just as well as <onlyinclude><onlyinclude></onlyinclude> and </only<noinclude></noinclude>include>?
You could apply the following trick, within the template in order to transclude and substitute <onlyinclude> or <noinclude>:
<{{{fwd|onlyinclude}}}>Some text...</{{{fwd|onlyinclude}}}>
Some text...
<{{{fwd|noinclude}}}>Some text...</{{{fwd|noinclude}}}>
After the substitution the {{{fwd|}}} variable will be expanded at its place with the default value and you will get the desired tags. I'm using fwd as shortcut of forward, but you could choice different name.
Here is how to insert a category in to a page by template substitution using this approach - the template content should be:
<{{{fwd|noinclude}}}><includeonly>[[Category:CatName|?]]</includeonly></{{{fwd|noinclude}}}>