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.
Related
I would like to highlight the component on click event.( need to add a class name as addBorder) how to do that? while user clicks on other component, I would require to remove addBorder from other components.
so only the click componet will be highlighted at once.
I can do using jQuery very easily but I am looking for ember way!!
here is my demo: Live Demo Link
You can add property like selectedItemTitle which will be changed on click to item.title. Then you can pass this selectedItemTitle down to components. Component can check if its item.title === selectedItemTitle. If yes then property like isSelected can be set to true. Then you bind isSelected to a class using classNameBindings.
Parent component template:
{{#each model as |item|}}
{{my-child item=item.title info=item.info tagName="li" selectedItemTitle=selectedItemTitle click=(action 'selectItem' item.title)
}}
{{/each}}
See working demo.
So I have a home.hbs template that looks like so:
<div>
{{input type="number" min="2" max="24"}}
{{#link-to 'game' (query-params cards="" class="button"}}
Let's Play!
{{/link-to}}
</div>
And I have a (not yet implemented) game route that will use a component to build up a game instance (which i pass with the 'cards' attribute). The thing is, the game route needs the value of the input field in this template to build this instance. Can i just do something like?:
{{#link-to 'game' (query-params cards={this.input.value} class="button"}}
Or is there a more efficient way to pass that number to the /game route? Thanks.
Definitely, you can add property to route controller (inputValue for example) and bound it to input value. And then use it in link-to helper.
Something like below (didn't check it in real app):
{{input type="number" min="2" max="24" value=inputValue}}
{{#link-to 'game' (query-params cards=inputValue class="button"}}
I have a component that contains a link-to. The component is more complicated, but for simplicity here:
//Component.hbs
{{#link-to link model}}{{yield}}{{/link-to}}
The problem is sometimes I will pass a model, sometimes I will not.
//Route.hbs
//providing the model
{{my-component link='chosenroute' model='chosenmodel'}}
//omitting a model - doesn't work
{{my-component link='otherroute'}}
How do I make the model argument optional?
Just put an if/else. undefined is not a good parameter for link-to.
//Component.hbs
{{#if model}}
{{#link-to link model}}{{yield}}{{/link-to}}
{{else}}
{{#link-to link}}{{yield}}{{/link-to}}
{{/if}}
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
I'm seeing some very strange behavior in this jsfiddle.
I am building an accordion control (hopefully eventually a good contribution to ember-bootstrap), and so I built a view class that uses layout to wrap the contents of the view:
Bootstrap.Accordion = Ember.View.extend({
tagName: 'div',
classNames: 'accordion',
layout: Ember.Handlebars.compile('{{yield}}')
});
Then I use it like so, with the {{#view}} helper, and include an {{#each}} block which will eventually include other views to set up the inside of the accordion control. And in one case so far, I do this twice in the same template, to display different information in two different accordion controls, sort of like this:
{{#view Bootstrap.Accordion}}
{{#each content}}
<div><strong>Field 1:</strong> {{field1}}</div>
{{/each}}
{{/view}}
{{#view Bootstrap.Accordion}}
{{#each content}}
<div><strong>Field 2:</strong> {{field2}}</div>
{{/each}}
{{/view}}
But, as you can see in the fiddle, this produces a very unexpected result. Basically, the second instance of the view is an exact copy of the first. Even the static content inside the {{#each}} block is not right:
Field 1: Instance 1 Field 1
Field 1: Instance 2 Field 1
Field 1: Instance 1 Field 1
Field 1: Instance 2 Field 1
However, if I put something between the {{#view...}} and {{#each}} helpers, it behaves as expected:
{{#view Bootstrap.Accordion}}
Fourth try...
{{#each content}}
<div><strong>Field 4:</strong> {{field4}}</div>
{{/each}}
{{/view}}
So, it looks like something about the similarity of the content directly within the {{#view}} helper causes the result to be cached by Handlebars...or something. That's just a wild hypothesis. Can anyone see what's going wrong here?
(Note that the Bootstrap library is not included in the fiddle, so it can't be that Bootstrap is goofing something up.)
This looks like a bug.
This github issue was created today, only with the {{#linkTo}} helper.
Looks like this is occurring with all block helpers.