Hi i am using emberJS for binding attributes to the elements can be done by using bind-attr , the same i want to do for action to user interaction.
<button {{#if DS.session.canEditTrailers}} {{action "addTTU"}} {{/if}}
{{bind-attr class="DS.session.canEditTrailers:ttuName:readOnlyTTUName"
disabled="DS.session.canEditTrailers::disabled"}}>
Here in above i used if condition for binding action to the element button.
It is not working..Can any please tell me is there any solution similar like bind-attr for actions.
There is no way to do what you want in the template. You have to handle this in your action handler itself. So instead of writing {{#if DS.session.canEditTrailers}} in the template, you should write:
// Your controller (or where you handle the action):
actions: {
addTTU: function() {
if(DS.session.canEditTrailers) {
// your code
}
}
}
Related
I have a component the main purpose of which is to display a row of items.
Every row has a delete button to make it possible to delete a row. How is possible to pass an action from a template to the component which will trigger an action in a router ?
Here is the template using the component:
#templates/holiday-hours.hbs
{{#each model as |holidayHour|}}
{{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true}}
{{/each}}
Here is the component template:
# templates/components/holiday-hour.hbs
...
div class="col-sm-1">
{{#if shouldDisplayDeleteIcon}}
<button type="button" class="btn btn-danger btn-sm mt-1" {{action 'deleteHoliday' holiday}}>
<span class="oi oi-trash"></span>
</button>
{{/if}}
</div>
I'm using the same component to display a row and to create a new item (holiday-hour).
I'm using ember 3.1.2
Thank you
You have to send the actions up from the component to the route. The main way to do this is by adding actions to your component that "send" the action to the parent. Once the action is sent you have to tell the component what action on the route to trigger by passing in the action as a parameter. Below is an example of how to do this.
Component js
# components/holiday-hour.js
...
actions: {
deleteHoliday(){
this.sendAction('deleteHoliday');
}
}
Template for route
#templates/holiday-hours.hbs
...
{{#each model as |holidayHour|}}
{{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true deleteHoliday='deleteHoliday'}}
{{/each}}
Route js
#routes/holiday-hours.js
...
actions: {
deleteHoliday(){
//code to delete holiday
}
}
I will try to give a general answer because your question is not giving enough/all info regarding the route actions etc. Long answer short, using closure functions. Assuming this is your route js file routes/holiday-hours.js
import Route from '#ember/routing/route';
export default Route.extend({
model(){ /*... some code */ },
setupController(controller){
this._super(controller);
controller.set('actions', {
passToComponent: function(param) { //.... function logic }
})
}
});
Note: in the above snippet, I'm using setupController to create actions. Alternatively, you can put the actions inside a controller file otherwise actions directly inside the route will throw an error.
So I want the action passToComponent to be called from the component. This is what you do to make it accessible inside the component.
{{#each model as |holidayHour|}} {{holiday-hour holiday=holidayHour shouldDisplayDeleteIcon=true callAction=(action 'passToComponent')} {{/each}}
Now we have passed the action to the component and here's how to call it from the component. Note: I have added a param just to show that it can take a param when called within the component.
import Component from '#ember/component';
export default Component.extend({
actions: {
deleteHoliday: ()=> {
this.get('callAction')() /*Pass in any params in the brackets*/
}
}
});
You will also see demonstrations using sendAction which is rather old and acts more of an event bus that is not very efficient. Read more from this article
If I have component in block form:
//some-component.hbs
{{#some-component}}
<button {{action "someAction"}}>test</button>
<!-- assume you have multiple buttons here with multiple actions -->
{{/some-component}}
//some-component.js
Ember.Component.extend({
actions: {
someAction() {
alert('NOT BEING CALLED');
}
}
});
using Ember > v2.0. The action is not being called.
If I call it:
{{some-component}}
and put:
<button {{action "someAction"}}>test</button>
inside the some-component.hbs template. then it works. but this way has some drawbacks which I want to avoid.
I've looked at the docs and everywhere it doesn't seem to have this sort of case.
the answer is:
{{yield this}}
in the template
and:
{{#some-component as |component|}}
<button {{action "someAction" target=component}}>TEST</button>
{{/some-component}}
I have a few actions that I'm placing on each item in a loop. Currently the action reveals all of the book-covers, instead of just one I want to target.
http://guides.emberjs.com/v2.0.0/templates/actions
Looks like I can pass a parameter, but I'm not sure of the syntax.
I've done this before in earlier version and remember using this or should it be
{{action 'showCover' book}} ... ?
Controller
import Ember from 'ember';
export default Ember.Controller.extend( {
actions: {
showCover(book) { // ?
this.set('coverVisible', true); // or
this.toggleProperty('coverVisible');
},
...
}
});
other thoughts...
actions: {
showCover(book) {
// currently this is just setting the *route in general* to coverVisible:true - which is not what I want
this.set('coverVisible', true);
// I can see this class - the route...
console.log(this);
// I can see the model of this route...
console.log(this.model);
// and I can see the book object...
console.log(book);
// but how do I set just the book object???
// I would expect book.set('property', true) etc.
console.log(book.coverVisible);
console.log(this.coverVisible);
}
}
Template
{{#each model as |book|}}
<li class='book'>
<article>
{{#if book.coverVisible}}
<figure class='image-w book-cover'>
<img src='{{book.cover}}' alt='Cover for {{book.title}}'>
</figure>
{{/if}}
...
{{#if book.cover}}
{{#unless book.coverVisible}}
<div {{action 'showCover'}} class='switch show-cover'>
<span>Show cover</span>
</div>
{{/unless}}
{{/if}}
{{/each}}
ALSO - please suggest a title for this if you can think of a more succinct one.
http://ember-twiddle.com/f44a48607738a0b9af81
#sheriffderek, You have already provided the solution in your question itself. You can pass the additional parameters after the action name. Something like:
<button {{action "showCover" book}}>Show Cover </button>
Working example using ember-twiddle: http://ember-twiddle.com/e7141e41bd5845c7a75c
You should be calling book.set('coverVisible', true); as you are wanting to set the property on the book itself.
actions: {
showCover: function(book) {
book.set('coverVisible', true);
}
unfortunately i am not able to figure out, how to receive an event of a component i use from within a component.
What i mean actually sounds harder than it is, consider the following toy example, with a component my-outer and another component my-inner (a short explanation follows the code, at the end i link to jsbin).
The templates:
<script type='text/x-handlebars' id='components/my-outer'>
<div {{bind-attr class="isRed:red"}}>Buttons should toggle my background color</div>
<button {{action "toggleRed"}}>It works from my-outer</button>
{{my-inner action="toggleRed"}}
</script>
<script type='text/x-handlebars' id='components/my-inner'>
<button {{action "action"}}>It doesn't work from my-inner</button>
</script>
The javascript:
App.MyOuterComponent = Ember.Component.extend({
isRed: false,
actions: {
toggleRed: function() {
this.toggleProperty("isRed");
}
}
});
my-outer contains a short text, with a background-color, which can be toggled from and to red by invoking the toggleRed action. the first button demonstrates that this works in principle.
now i would like to bind the default action of the second component to this same toggleRed action, that's the point of the following line.
{{my-inner action="toggleRed"}}
But on clicking the second button (which is part of my-inner) an error is thrown and the action is not fired.
How do I fix this example?
http://emberjs.jsbin.com/cabasuru/2/edit?html,js,console,output
Thanks so much in advance
(and this is my first question on so, i am happy about any meta-critics)
Since Components work just like views, easiest way is to get the parentView and forward the action. You may have to handle the action in my-inner like following.
App.MyInnerComponent = Ember.Component.extend({
isRed: false,
actions: {
toggleRed: function() {
this.get('parentView').send('toggleRed');
}
}
});
You can see outer component can be accessed as parentView in inner component. Here is the working jsbin link
http://emberjs.jsbin.com/cabasuru/5/edit
My question actually missed the main point. What goes wrong in the example above, is that the action helper in the inner component
<button {{action "action"}}>It doesn't work from my-inner</button>
does not trigger the default action associated with the component. Instead it invokes a new event named action, which is not allowed to bubble (due to the component confinement).
It turns out, there are two ways to solve that:
Properly reroute the event in an actions block on the my-inner component
<button {{action "my-action"}}>...</button>
together with a definition of the my-action action for my-inner:
App.MyInnerComponent = Ember.Component.extend({
actions: {
myaction: function(){
this.sendAction();
}
}
});
This is basically, the idea #CodeJack proposes, with the difference,
that here we rely on the wiring, which is set-up in the template of my-outer.
http://emberjs.jsbin.com/cabasuru/3/edit
As #torazaburo hinted at, setting the target property on the my-inner component to the my-outer component allows the event triggered from the action helper to bypass the component isolation.
{{my-inner target=controller}} in the my-outer template and a <button {{action "toggleRed"}}>...</button> in the my-inner template.
I'm updating a personal project where I used the ember.js version 0.9.x.
So a new version was released and I have a problem related with ember action.
I have the following html code:
<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li>
where, when I click its call this function activateView:
activateView: function(event, context) {
console.log(event);
}
but the event and the context are undefined. I've already tried this.context and it returns undefined.
The main idea its obtain the id of the link when the user click.
I know about routes and the handlebar helper link to, but I really need that id for other things,
In Ember 2...
Inside your action you always have access to the Javascript event object which has the DOM element e.g.
actions: {
myAction() {
console.log(event.target) // prints the DOM node reference
}
}
The event is not passed using the action helper. If you really want the event object, you need to define a view and use the click event:
App.MyLink = Em.View.extend({
click: function(e) {
}
});
and then:
<li>{{view App.MyLink}}</li>
but requiring access to the dom event is a rare case, because you can pass arguments to {{action}}. In your case:
<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>
and in the event:
activateView: function(id) {
console.log(id);
}
There are two ways you can receive event object in actions,
1.If you are using component, then you can define any of this list of event names in component and that is designed to receive native event object. eg., {{my-button model=model}}
export default Ember.Component.extend({
click(event){
//oncliking on this componen will trigger this function
return true; //to bubble this event up
}
})
2.If you are using html tag like button then you need to assign a (closure) action to an inline event handler.
{{#each item as |model|}}
<button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}
In actions hash toggle function will always receive native browser event object as the last argument.
actions:{
toggle(model,event){
}
}
In the below format, action toggle will not receive event object,
<button {{action 'toggle'}}>{{model.title}}</button>
Input helpers such as {{input key-press="toggle" and {{text-area key-press="toggle"
Explained really well in ember guide https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions
you need to pass the id into your function like so to have it accessible in the view, you can pass along what ever you want, but in your example this should do it
html
<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>
then you have access to the id or what ever you passed in, in the view
js
...
activateView: function(data){
console.log(data); // should be the ID "startApp"
}
...
Just use event handler directly.
Reference: https://github.com/emberjs/ember.js/issues/1684
I don't have enough reputation for a comment, but here is the relevant documentation using Ember Octane.
The callback function will receive the event as its first argument:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class ExampleComponent extends Component {
#action
handleClick(event) {
event.preventDefault();
}
}