i have button in component
<button type="button" class="btn btn-sm btn-default" {{action "applyDateFilter"}}>GO</button>
Now i have written this action applyDateFilter in component.js like this
applyDateFilter() {
var variable = this.get('dateFilter');
this.sendAction('testAction2');
}
Now i have another action in main route.js file
testAction2: function(){
alert('test');
}
Now i want to call this route action from applyDateFilter action so how can i do this.I am using ember js version 2.10.
Thanks
option 1.You need to define action in controller, and use send method to call action in route.
testAction2(){
this.send('testAction2Route');
}
option 2.Install ember route action helper addon. and you can invoke it directly from component like the below,
<button type="button" class="btn btn-sm btn-default" {{route-action "applyDateFilter"}}>GO</button>
Note using route-action instead of usual action helper
Refer this answer for classic action and closure action and route action related stuff
Related
I have a wrapper component that has an action that needs to be triggered from within, but I can't get rid of this:
{{#wrapper-component as |wrapper|}}
<button {{action 'wrapper.myAction'}}
{{/wrapper-component}}
the above is the template of "componentA"; when I click the button I get an error saying that componentA does not have an action handler for "wrapper.myAction"; I can't get why it looks for the action on componentA instead of wrapper-component first.
of course "myAction" is defined in "actions" on "wrapper-component";
the wrapper component has this template:
{{yield (hash myAction=(action 'myAction'))}}
Replace this:
<button {{action 'wrapper.myAction'}}
with this:
<button onclick={{action wrapper.myAction}}
please make sure you understand the difference between ember actions and closure actions.
I'm trying to toggle a global property on the application controller, by clicking a button on one of the templates. I've read some stuff on action bubbling but can't it to work.
Here's the property and action on the Application controller
export default Ember.Controller.extend({
isAuthenticated: true,
actions: {
logIn: function(){
this.toggleProperty('isAuthenticated');
}
}
});
And here's the action with a login.hbs template file (I'll turn this into a proper button soon)
<span {{action 'logIn'}}>
{{#link-to 'boards' class="btn-l bg-blue white db mtl link bn w-100"}}Login{{/link-to}}
</span>
How could I ensure the action toggles the property on the Application Controller?
In your login controller,you need to inject application controller.
import Ember from 'ember';
export default Ember.Controller.extend({
appCont:Ember.inject.controller('application')
});
and in login.hbs you need to specify which target will receive the method call.
<button {{action 'logIn' target=appCont}}> Login </button>
In this <button {{action 'logIn'}}> Login </button> , context of a template is login controller, actions used this way will bubble to login route when the login controller does not implement the specified action. Once an action hits a login route, it will bubble through the route hierarchy.
Reference: http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_specifying-a-target
EDIT: If you want to call functions available in Controller inside Component then you need to pass actions toComponent`
Login.hbs
{{component-a logIn=(action 'logIn') }}
component-a.hbs
<button {{action (action logIn)}}> LogIn</button>
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'm using ember-easyForm and I have a non-submit button in the form which I want the parent view to handle.
my_view.hbs:
{{#form-for model}}
<button {{action "delete"}}>Delete</button>
{{/form-for}}
You used to be able to do:
<button {{action "delete" target="parentView"}}>Delete</button>
But it doesn't seem to work in the latest version of Ember.js. Is there any other way of passing the action to the parent view?
The following will get the form to handle the action but that's not what I want:
<button {{action "delete" target="view"}}>Delete</button>
Doing a bit more digging, I got the answer from this post. So this is how you do it:
<button {{action "delete" target="view.parentView"}}>Delete</button>
Which seems to be a better implementation than target="parentView", as you now, I presume, target the parent view of the parent view.
I very new to meteor
I'm adding the update feature to the parties demo
I now would like to only show the "Modify" button to the party's owner
I tried
{{# with party}}
{{#if owner currentUser }}
<br/><input type="button" value="Modifier" class="btn btn-small edit">
{{/if}
but offcourse this is not the right way to do it
I can't find how to access the user object in the template to compare it
please help
You always have access to the Template object instance with this (a party instance in this example) inside the helper methods:
Template.details.isOwner = function() {
return this.owner === Meteor.userId();
};
{{#if isOwner}}
<br/><input type="button" value="Modifier" class="btn btn-small edit">
{{/if}}
(It's very similar to the canRemove helper that's already in the Parties example.)