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}}
Related
I am new to emberJS and I am trying to open a new page like 'www.google.com' from one of my page where I have my link specified in my HBS template like below.
{{#link-to 'applications.google' tagName="li"}}Google{{/link-to}}
I tried to insert the {{action}} helper inside the tag also, and wrote an action method in the controller, yet it didn't work. Not sure. Please help.
You can use normal anchor tag with full URL with protocol.
<a href='http://www.google.com'> example </a>
I did added an action helper in the HRef tag like
And in the Ember Controller I included an action as
actions: {
openGoogle() {
window.open("google.com");
}
}
It works!!!
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)
On a template you can use the {{render 'route' model}} helper to embed a template and controller into another template, but this will set the model passed as an argument as the model. Is there a way to embed a route into a template but have the model come from the ebeded route's model hook? The reason why I can't use the parameter method is that the route's model is an RSVP hash and it depends on a dynamic segment.
If you need a template backed by the route, you shouldn't try to embed it somehow, just define new nested route in your router, create a tempalte and put {{outlet}} instead of {{render}}. It will do absolutely the same - resolve the route, fetch the model, setup controller and render given template.
If you still need to embed async data via {{render}} helper in some reason, you can use conditionals:
{{#if model.length}}
{{render 'template' model}}
{{/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
Currently, if we define our view as {{#view App.myView}}, ember/handlebars will wrap the view element inside a <div id="ember-1234" class='ember-view'>.
Is there a way to stop this?
You probably want to set tagName as ''.
App.MyView = Em.View.extend({
tagName: ''
});
At least it stops wrapping inner contents.
If you want to customize view element's id, you can use:
{{#view App.myView id="my-id"}}
I usually think my views as wrapper. For example, if the initial given html code is :
<div class="item"><p>my stuff></p></div>
Then I create a view with a tagName property as "div" (which is default), and classNames property as "item". This will render, with proper handlebars template :
{#view App.myView}
<p>my stuff></p>
{/view}
-> render as
<div id="ember-1234" class="ember-view item">
<p>my stuff></p>
</div>
Then if you need to have your proper ID on this div, you could define the "elementId" property on your view class (before create()). (#see source code)
I assume you are talking about the 'ember-view' class which is not customizable (element type being customizable thanks to the tagName attribute...).
Actually, Ember later uses this class to register (once!) an event listener on the document in order to dispatch events to the JS view.
I don't mind it would be that simpler to avoid using this class. There would have to find another way to select all ember's controlled element, but I have no idea how.
See source, # line 117.
If I understand you correctly you want to achieve something like jQuery's replaceWith? You can use this in Ember.js when my Pull Request gets merged: https://github.com/emberjs/ember.js/pull/574.
Also have a look at Create Ember View from a jQuery object