I understand that:
When the rendered link matches the current route, and the same object instance is passed into the helper, then the link is given class="active".
http://emberjs.com/guides/templates/links/
Can a class name other than "active" be passed to the template by the link-to helper when it match the current route?
More specifically, I would like that that the <li> tag generated by the link-to help get the class="open" when the current route match the route of the link-to helper.
tks
UPDATE
The below answer from jasonmit work for dynamic routes where your need to pass an argument. Since my route is static, I do not pass an argument. Also, I needed the <li> to be assigned the class Open. Hence, I nested two link-to. The first link-to generate the <li> tag and add class="open" when the link-to match the route. The second link-to generate a <a> tag which is the link in HTML.
{{#link-to 'communications' tagName="li" activeClass="open"}}
{{#link-to 'communications'}}
<i class="icon-rocket"></i>
<span class="title">communication</span>
{{/link-to}}
{{/link-to}}
{{link-to 'home' 'home' activeClass='opened'}}
https://github.com/emberjs/ember.js/blob/5fe2d63a7dab0484cad9e729886ac71b4c05f1fd/packages/ember-routing-handlebars/lib/helpers/link_to.js#L96
Related
I want to pass queryparams and anchor element name in the link-to. like this
localhost.domain.com?get=100&interviewId=11#4
I used query params to construct get=100&interview=11 , something like this
{{#link-to 'domain.url' (query-params get=100
interviewId=11)class="btn btn-info"}}
Link
{{/link-to}}
How to generate the link with anchor using ember link-to ?
Note: Need solution with link-to only, <a href=""> is not needed
Install ember-href-to addon,
ember install ember-href-to
You can use href-to helper to generate URL by providing queryParams and routeName.
(concat (href-to 'domain.url' (query-params get=100 interviewId=4)) propName)
I've got a Template which defines an <div id="sidemenu"><ul>...</ul></div>.It should has some <li>-Elements which represents general available-Menu-Items. On Sub-routes I want to add some additional menu-entries which only make sense on that routes. But since the div where to put the li's into is defined in the parent-route-template, I don't know how I should implement this.
My first theoretical approach was to call a controller function which returns the necessary li's. I could override this function in each sub-controller but I don't know if this is good practice.
However I want to do it in a ember-vanilla way if possible (someone told me to use a plugin called "wormhole" or something)
I would make the dependent portions of the menu a named outlet, then render into the outlet from each route's renderTemplate hook.
{{! components/sidebar/template.hbs }}
<div id="sidemenu">
<ul>
<li>Generally available menu item 1</li>
{{outlet name='nav'}}
^^^^^^^^^^^^^^^^^^^^^
</ul>
</div>
// thing1/route.js
renderTemplate() {
this.render('thing1-nav-template', {into: 'nav'});
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
this._super(...arguments);
}
You could use {{ember-wormhole}} I suppose--I don't know that module. It certainly does not fall into the category of "ember vanilla" if that's one of your criteria. Essentially, it would allow you to write the thing1-nav-template contents directly in your route template instead of another template. I have no idea how stable it is, so personally I'd do it the old-fashioned way using outlets; that's what they're there for.
You can use https://github.com/yapplabs/ember-wormhole to render content from one template into an HTML element identified by an ID.
Menu Template:
<ul>
<li>General stuff</li>
</ul>
<ul id='foobar' />
Subroute Template:
{{#ember-wormhole to="foobar"}}
<li>Subroute stuff</li>
{{/ember-wormhole}}
I have a link to helper that generate a <span>. The <span> should:
have the class:"arrow open" when it is active.
have the class:"arrow" when it is NOT active.
{{#link-to 'status' tagName="span" activeClass="arrow open"}}
{{/link-to}}
Question: The point 1 is working with the use of the activeClass. However, I don't how to assign a class when the link-to helper is not active as per the point 2.
tks
Adapted from the guides:
{{#link-to 'status' tagName='span' class='arrow' activeClass='open'}} {{/link-to}}
The class property lets you set the class that will be present at all times.
I am willing to do as follows :
{{#if location_resource_is_present}}
{{#link-to location_resource_link }} {{location_resource_name}}
{{/if}}
The problem here is that location_resource_link is a property which stores the route name at the run-time. How can I use it in link-to helper?
I have a template that has a a tag with an id and based on id the css applies style to this a href. I would like to use the LinkTo helper for this tag and id set to the one it has now. Helper LinkTo in Ember generates a link. I need to set an id on this a link for example:
<a href='...' id=xyz>
How to acomplish it?
You can just pass HTML attributes to the linkTo helper:
{{#linkTo 'some.route' id="xyz"}}Link text{{/linkTo}}