sendAction is not working for component. When using component inside view and sending action from component to view.
confirm-dailog.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
closeConfirmDialog:function(){
this.sendAction('onCancel');
}
}
})
confirm-dailog.hbs
<div class="dialog" id="dialog">
<div class="text">{{text}}</div>
<div class="button"{{action 'closeConfirmDialog'}}>Cancel</div>
</div>
modal.js
import Ember from 'ember';
export default Ember.View.extend({
layoutName: 'components/modal-box',
actions:
{
closeDialog:function()
{
console.log('called model closedialog')
},
}
})
modal-box.hbs
<div class="dialog" id="dialog">
{{yield}}
{{confirm-dialog onCancel="closeDialog" text="Would you like to close the modal"}}
</div>
when i am clicking on cancel button closeConfirmDialog action gets called and from there i am trying to send closeDialog action but its showing error Nothing handled the action 'closeDialog'
here i have added screenshot of ui
Ember : 1.8.1
Ember Data : 1.13.7
Handlebars : 1.3.0
jQuery : 1.11.1
Views are removed from Ember 2.0 API. http://emberjs.com/deprecations/v1.x/#toc_ember-view
I would encourage you to replace view with Component.
Moreover for your requirement ember-elsewhere addon or ember-modal-dialog would be most suitable.
Related
my functions toggles the class name on click to an element. But It's not remove the class names from other elements. so all elements are highliting now. But whenever user click on an element, it should have the classname rest of siblings has to removed the classname how do do this?
here is my try but not works:
import Ember from 'ember';
export default Ember.Component.extend({
isSelected : false,
deSelectOthers : function(){
this.set( "isSelected", false ); //deselecting all before add the class to clicked element
},
actions : {
selectCard : function(card) {
this.deSelectOthers(); //de select others not works
this.toggleProperty('isSelected'); // add class to this element only works. how to remove class from other element?
}
}
});
UPDATE
I am sorry for bad description about my requirement. I have created the requirement using jQuery - simply how to achive the same with emberjs?
Demo-Requirement
Here is the working twiddle
You need to maintain selectedIndex/value and use if check to update class based on the selectedIndex/value.
application.hbs
<div class="parent">
<ul>
{{#each model as | temp index|}}
<li class={{if (eq selectedIndex index) 'highlight' }} {{action 'changeSelectedIndex' index}}>{{temp}}</li>
{{/each}}
</ul>
</div>
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return [1,2,3,4];
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
selectedIndex:undefined,
actions:{
changeSelectedIndex(index){
this.set('selectedIndex',index);
}
}
});
You need to install ember-truth-helpers addon by running ember install ember-truth-helpers
I am trying to setup a modal window as outlined in this post:
http://blog.atmartin.io/a-dead-simple-ember-cli-modal/
The author indicated that the openModal action is written in the app/controllers/application.js...
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
openModal: function(targetId) {
var modal = Ember.Views.views[targetId];
modal.send('toggleModal');
}
}
});
However, I am using the component from the books list page, using a test button:
<button {{action 'openModal' 'modal-author'}}>Open Author Modal Window</button>
{{#simple-modal enabled=false title="--Simple Modal --" id="modal-author"}}
Modal text. Oh girl!
{{/simple-modal}}
So, I tried (I may be wrong...) to insert the openModal action (when the button is clicked) into the book.js route:
// app/routes/books.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('book');
},
actions: {
openModal: function(targetId) {
var modal = Ember.View.views[targetId];
modal.send('toggleModal');
},
....
}
});
In this case, I get an error Ember.view seems to be undefined ...
books.js:11 Uncaught TypeError: Cannot read property 'views' of undefined
You are using a tutorial that utilizes a deprecated & removed construct (views) in recent versions of Ember.
I recommend you use the https://github.com/yapplabs/ember-modal-dialog addon for creating modals in recent versions of Ember.
I have an application that has a Navigation bar that I have put in "Application" context. By default, these Navigation bar links will be disabled and will be enabled only on a particular action from template.
The Application controller that contains the disabled status of the link in Nav Bar:-
App.ApplicationController = Ember.Controller.extend({
userName:"TestUser",
firstLinkDisabled:true,
actions:{
handleToggle:function(){
console.log("Handling application action with linkstatus="+this.firstLinkDisabled);
//this.set("firstLinkDisabled",false);
this.toggleProperty("firstLinkDisabled");
}
}
})
The Index Controller that will send the action to Application Controller:-
App.IndexController = Ember.Controller.extend({
actions:{
toggleApplicationButton:function(){
this.controllerFor("Application").send("handleToggle");
}
}
})
Application Template:
<script type="text/x-handlebars">
{{#link-to 'first' disabled=firstLinkDisabled}}First link in application{{/link-to}}
<button {{action 'handleToggle'}}>Toggle Application Menu </button>
{{outlet}}
</script>
Index Template
<script type="text/x-handlebars" id="index">
<button {{action 'toggleApplicationButton'}}>Toggle Application Menu </button>
</script>
When I click on "Toggle Application Menu" button I get the following output in console.
Console Output
But in Ember inspector the property "firstLinkDisabled" doesn't change. Image of Ember Inspector:-
Ember Inspector Image
The link remains disabled.
What am I doing wrong here?
Doesn't ember allow to change the property of other controller?
How to make this thing work?
Here is a simple example from my project:
import Ember from 'ember';
export default Ember.Controller.extend({
/*first, inject a controller*/
loginController: Ember.inject.controller('lang.login'),
/*some code*/
actions: {
register: function () {
/*some code*/
/*work with injected controller*/
var c = this.get('loginController');
c.set('identification', that.get('user').email);
c.set('password', that.get('user').plainPassword);
/*some code*/
}
}
});
ember docs
Use Ember.inject.controller()
App.IndexController = Ember.Controller.extend({
appController: Ember.inject.controller("Application"),
actions:{
toggleApplicationButton:function(){
this.get("appController").send('handleToggle');
}
}
})
controllerFor you can use in the Routes
Also you can use the alias
appController: Ember.computed.alias('controllers.Application')
Refer Emberjs official documentation for detail
First, inject the application controller into the index controller
//index.js
application: Ember.inject.controller(),
Then you can access the property in the application controller like this:
//index.js
application.toggleProperty("firstLinkDisabled");
Im Using EmberJs 1.13.15 and Ember-CLI , i was trying to slightly modify the main LinkComponent behavior by adding the following code:
app/components/nav-link-to.js:
import Ember from 'ember';
export default Ember.LinkComponent.extend({
tagName: 'li'
});
app/templates/components/nav-link-to.hbs:
{{yield}}
and im using this component in:
app/templates/nav-bar.hbs:
<ul class="nav navbar-nav">
{{#nav-link-to 'index'}}Home{{/nav-link-to}}
</ul>
but whenever i open the nav-bar template in the browser nothing shows up
and in ember inspector's console it shows the following error
Uncaught TypeError: Cannot read property 'slice' of undefined
Any help?
Thanks in advance.
You will have to add the params in your component. Also you will have to call this._super in init method of component. Below is the working component code for extended link-to.
import Ember from 'ember';
export default Ember.LinkComponent.extend({
tagName: 'li',
positionalParams: 'params',
init: function() {
this._super(...arguments);
},
didReceiveAttrs: function() {
this.attrs.params = this.get('params');
this.attrs.hasBlock = true;
}
});
I'm trying to create a modal for my users to signin, so I have this link:
<li><a {{action "signin"}}>Sign In</a></li>
in a {{planhw-navbar}} component.
{{planhw-navbar signin=(action "showModal" name="signin-modal")}}
But when I open my browser, I get the error:
An action named 'showModal' was not found in (generated application controller)
I've tried putting an action in a controller, a route, and a component:
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
showModal: function(name) {
this.render(name, {
into: 'application',
outlet: 'modal'
});
}, //...
}
})
My component, {{signin-modal}}, works correctly.
My entire application.hbs:
{{planhw-navbar signin=(action "showModal" name="signin-modal")}}
{{outlet}}
{{outlet 'modal'}}
You need to add an action called showModal in your application.js controller.