How can I open a new window when the user clicks on a link?
I have tried adding target="_blank" and bindAttr but it doesn't work.
The code that doesn't work:
<a target="_blank" {{action goToSettings href=true}}>App Settings</a>
or
<a {{bindAttr target="_blank"}} {{action goToSettings href=true}}>App Settings</a>
And this is the html output from the first example:
<a target="_blank" href="#/settings" data-ember-action="5">App Settings</a>
You have two choices:
send an action, and in the javascript that handles the action, call
window.open(...) to open a new window to a particular URL
Don't use an action and instead make it a static link or if you need to
dynamically vary the target URL, use <a target="_blank" {{bindAttr
href="yourBoundPropForTheUrl"}}>Click here</a>
This has been added to LinkView, and therefore is now supported directly in {{link-to}}.
Pull request is at https://github.com/emberjs/ember.js/pull/4718
Related
here is my local string:
'CS2I.navbar.title' : 'Split Your Bills <a href="#" {{action keyFactLink}}>Link</a>',
After I am getting the template, there action disappears. how to pass the action through locale?
Because I am building the locale through dynamic
any help?
UPDATE
original link : <a href="#" {{action 'keyFactLink'}}> {{t 'CS2I.here'}} </a> works fine. I am doing a action to open a new page in keyFactLink
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
I have a template where I have the following code:
<div {{bind-attr class=":suggestions isRecept::disabled"}} {{action "toggleRecept"}}>
<!-- skipped the rest -->
<a {{bind-attr href="recept_pdf" bubbles=false}}>Click for the recept!</a></p>
</div>
I want to link to an external pdf file. However when a user click on the link, the toggleRecept visibility action is fired. The bubbles=false is incorrect code, but that is what I wanted.
I know it is possible to limit the action, but I am curious if it is possible to do some bubble preventing on a simple HTML attribute.
I have some tabs, and want the 'viewport' to render a view when I click each tab. Simplistically, something like this from Twitter Bootstrap:
Each view is complex enough that I'll need to create view objects separately (there's data handling, svg rendering, etc.). But I don't want these three tabs to have routes.
I've tried using the action handlebars helper, but am getting bogged down in the details, and I think that means I'm doing it wrong. I started out with something like this:
<div class="btn-group">
<a href="#" {{ action "changeChart" "company" }}
{{ bindAttr class=":btn companyBreakdownSelected:active" }}Breakdown by Company
</a>
<a href="#" {{ action "changeChart" "division" }}
{{ bindAttr class=":btn divisionBreakdownSelected:active" }}Breakdown by Division
</a>
<a href="#" {{ action "changeChart" "category" }}
{{ bindAttr class=":btn categoryBreakdownSelected:active" }}Breakdown by Category
</a>
</div>
And then I was going to add the changeChart method on my controller, which would affect the three boolean properties.
It seems like there's a better way, ideally something like {{linkTo}} that would automatically add the active class, and render the correct view. But linkTo requires a route.
Am I going about this wrongly?
Are you in need of something like Ember & Twitter Bootstrap Tabs implemented by Adam Hawkins ?
I have a header with some login/signup forms that popup when you click the respective buttons.
While it was working fine using just jQuery, I've now started to integrate Ember into the application and I'm running into some trouble with some simple toggle functionality.
Here's the basic HTML markup:
<header>
<h1>Page Title<h1>
<nav>
<a id="toggles-login" class="button {{active_class_binding}}">Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}">Signup</a>
</nav>
<div id="popup-forms">
<div id="login-form"></div>
<div id="signup-form"></div>
</div>
<header>
I'm completely new to Ember and I really have no idea how to set this up. The only thing I want is to be able to set the popup forms up as Ember.View objects and toggle them with some action helpers.
I really am lost on this one.
A simple solution would be to trigger simple actions to show the respective forms:
<a id="toggles-login" class="button {{active_class_binding}}" {{action showLoginForm target="view"}}>Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}" {{action showSignupForm target="view"}}>Signup</a>
The corresponding view would have to implement both actions:
App.YourView = Ember.View.extend({
showLoginForm : function(){
this.$("#login-form").toggle();
},
showSignupForm : function(){
this.$("#signup-form").toggle();
}
});