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
Related
I have an odd conundrum.
It appears that when an element is hidden by a focus-out event ember is unable to attach the corresponding click event that triggered the focus out properly. For example with the code below if the <a> tag triggers the focus-out event on the input and the code behind turns _focused to false then the selectOpts event is never triggered. It appears to only happen if the a tag is hidden as a result of the focus-out.
Also oddly it does not matter how the a tag is hidden either if i do just display:none it still also doesn't fire the selectOpt action.
Here is my code:
<div class="dropdown">
{{input value=value class='form-control' focus-in="focused" focus-out="unfocused" }}
{{#if _focused}}
<ul class='dropdown-menu'>
{{#each _filteredOptions as |opt|}}
<li><a href="#" {{action "selectOpt" opt}}>{{opt}}</a></li>
{{/each}}
</ul>
{{/if}}
</div>
Here is a ember twilldle showing the issue.
https://ember-twiddle.com/6bbdb669d19d7a498e645bb0297f1b46?openFiles=templates.components.input-autocomplete.hbs%2Ctemplates.components.input-autocomplete.hbs
In order to get it to show the issue focus in on the text area and then try to select one of the links that appear below the input. What is supposed to happen is that when you select the link it is to populate the input field with the value.
You can use just focus-in instead of both focus-in and focus-out. So when you click on input focus-in event trigger and set _focused to true. Then, in action selectOpt you set value and after that set property _focused to false.
<div class="dropdown">
{{input value=value class='form-control' focus-in='focused' }}
{{#if _focused}}
<ul class='dropdown-menu'>
{{#each options as |opt|}}
<li>
<a href="#" {{action "selectOpt" opt}}>{{opt}}</a>
</li>
{{/each}}
</ul>
{{/if}}
input-autocomplete.js
actions: {
focused() {
this.set('_focused', true);
},
selectOpt(opt) {
console.log(opt);
this.set('value', opt);
this.set('_focused', false);
}
}
I didn't include all code for input-autocomplete it's the same as before exxept actions. Also I used options array insted your filter because didn't get any results when clicked on input.
If I declare a component like this:
<p>
{{#x-autosuggest source=model destination=tags minChars=0}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I want the name that field to come from a context I pass using the new block params syntax. I've tried the code sample below but the context is still the context of the controller and not the argument I pass using yield in the component's hbs file.
<ul class='selections'>
{{#each destination as |selection|}}
<li class="selection">
<a class="as-close" {{action "removeSelection" selection}}>x</a>
{{yield selection}}
{{displayHelper selection searchPath}}
</li>
{{/each}}
</ul>
How can pass the selection argument so I can set the name attribute in the original code snippet?
I've recreated a basic example with this jsbin
You need to add as |name| where you're using your component to get the yielded value.
<p>
{{#x-autosuggest source=model destination=tags minChars=0 as |name|}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
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 ?
Hi there i have a small question that belonging to my small ember application.
JSFiddle upload is here. I used bootstrap accordion to visualize my tickets. When i click on the "click" it adds another accordion into my view. But sadly it cannot be opened or used. Every accordion i dynamically created cannot be opened or closed. There is no error or exception thrown and from my point of view everything should work fine. My click-function looks like this:
click: function() {
this.counter++,
name = this.name+this.counter.toString(),
tre = App.Ticket.create({
Text: "try",
id: name
});
this.pushObject(tre);
}});
The belonging html is here:
<div class="accordion-group">
{{#each content}}
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="id"}}>
Ticket ID/Störfall
</a>
</div>
<div {{bindAttr id="id"}} class="accordion-body collapse in ">
<div class="accordion-inner">
{{Text}}
</div>
</div>
{{/each}}
</div>
I hope you can help me.
You can add an action helper to the accordion link title
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2"
{{bindAttr href="item.id"}}
{{action "click" item target="view"}}>
Ticket ID/Störfall
</a>
Then implement a click handler event in your view
App.TicketView = Em.View.extend({
click:function(context) {
var el = this.$('a[href='+context.get('id')+']');
el.toggleClass('collapsed');
this.$('#'+el.attr('href')).toggleClass('in');
}
});
Here's a working fiddle
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