How can we get the original event in ember action while handling action inside controller?
Controller
import Ember from 'ember';
export default Controller.extend({
showDetails:function(id)
{
// I want like $(this).position().top
}
});
Template
{{#each item in list}}
<em {{action "showDetails" item.id bubbles=false}}></em>
{{/each}}
{{#each item in list}}
<em onclick={{action "showDetails" item.id}}></em>
{{/each}}
In controller,
import Ember from 'ember';
export default Controller.extend({
actions: {
showDetails(id, event) {
//i want like $(this).position().top
}
}
});
Related
Changing isOpen property in route should reflect it in my component. How can we accomplish this ?.
Ember-Twiddle
routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
isOpen:true,
setupController(controller,model){
this._super(...arguments);
controller.set('isOpen',this.get('isOpen')); //whenever i set route property, will this update controller?
console.log('setupController');
},
actions:{
toggleOpen(){
console.log('before toggle - ',this.get('isOpen'));
this.toggleProperty('isOpen'); //changing this route property is not reflected in controller.
//this.controller.toggleProperty('isOpen'); //changing controller is reflecting.
console.log('after toggle - ',this.get('isOpen'));
}
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
templates/application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
{{isOpen}}
{{my-component isOpen=isOpen toggleOpen='toggleOpen'}}
<br>
{{outlet}}
<br>
<br>
templates/components/my-component.hbs
my-component {{isOpen}}
<button {{action 'toggleOpen'}}> Toggle </button>
{{yield}}
components/my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
toggleOpen(){
this.sendAction('toggleOpen');
}
}
});
Because isOpen is a primitive typed property. No matter if it was an object. Sample Twiddle.
Or more simplistic one.
I have a component that has a text field, like this
<div>
{{input type='text' insert-newline='postMessage' class="form-control" autofocus="true"}}
<input type="hidden" name="uid" value={{room.uid}}/>
</div>
the component that have this snippet, lives inside a route called room
export default Ember.Route.extend({
model(params){
this.store.findRecord('room', params.uid);
}
});
to handle the action in the input, I created a controller for the room:
app/controllers/room.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
postMessage(params){
console.log(params);
}
}
});
but when I hit enter, I get this error:
Uncaught Error: <chathub-ember#component:chat-room::ember1071> had no action handler for: postMessage
I tried to put this action in the route as well and didn't worked
In the room.hbs file,
{{my-component myAction='postMessage'}}
and then in my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
postMessage(params) {
this.sendAction('myAction', params);
}
}
})
My click-editable component like:
Template:
{{#if isEdit}}
<div class="input-group">
{{input type="text" value=editValue class="form-control"}}
<div class="input-group-btn">
<button type="button" class="btn no-margin-btn btn-info" {{action "updateValue"}}>{{fa-icon 'check'}}</button>
</div>
</div>
{{else}}
....
{{/if}}
And:
export default Ember.Component.extend({
tagName: "",
isEdit: false,
canEdit: true,
category: 'input',
editValue: Ember.computed.oneWay('value'),
actions:{
updateValue() {
this.sendAction('onUpdate', this.get('valueModel'), this.get('valueColumn'), this.get('editValue'), this.get('isEdit'));
}
}
});
Use in my template:
{{#each model.quotationWorkItems as |quotationWorkItem index|}}
{{click-editable valueModel=quotationWorkItem valueColumn='name' value=quotationWorkItem.name onUpdate=(action "updateInput")}}
{{/each}}
In the controller:
import Ember from 'ember';
export default Ember.Controller.extend({
....
actions: {
updateInput(updateModel, updateColumn, value, isEdit) {
updateModel.set(updateColumn, value);
updateModel.save().then(()=> {
this.get('model').reload();
this.set('isEdit', false);
}, ()=> {
alert('wrong');
});
}
}
})
Route:
import Ember from 'ember';
export default Ember.Route.extend({
...
model(params) {
return this.store.find('quotation', params.quotation_id);
},
setupController(controller, model) {
controller.set('model', model);
...
}
})
Quotation model:
import DS from 'ember-data';
export default DS.Model.extend({
quotationStocks: DS.hasMany('quotationStock'),
quotationWorkItems: DS.hasMany('quotationWorkItem'),
...
});
QuotationWorkItem model:
import DS from 'ember-data';
export default DS.Model.extend({
transactionType: DS.belongsTo('transactionType'),
quotation: DS.belongsTo('quotation'),
...
});
This code can update model value, but problem isEdit is the component value. When isEdit send to controller and set another value, it can not work. So I think can not change component value in ember controller?
this.set('isEdit', false);
The code can not work in controller. I'm using Ember 2.4.0.
You need to bind the controller isEdit property to the component isEdit property.
{{click-editable isEdit=isEdit valueModel=quotationWorkItem valueColumn='name' value=quotationWorkItem.name onUpdate=(action "updateInput")}}
This will overwrite the isEdit property in the component (data down).
I am totally newbie in Ember. I would like to find a record in todos array then delete it. I know I have to pass a parameter to function to find it first then delete it, but I had no luck. Here are related files:
todos.hbs:
{{#each todo in model}}
<li>
<label>{{#link-to "todos.show" list}}{{todo.title}}{{/link-to}}</label>
<button type="button" class="destroy" {{action "deleteTodo"}}></button>
</li>
{{/each}}
I put deleteTodo action in toods routes.
todos routes :
export default Ember.Route.extend({
model: function() {
return this.store.find('todo');
},
deleteTodo: function() {
// Function itself
});
Thanks
Move the deleteTodo method into an action on your routes controller instead of on the Route. Then pass your current todo into your controllers deleteTodo method:
<button type="button" class="destroy" {{action "deleteTodo" todo}}></button>
Looks like your are using ember-cli so the controller would look something like
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
deleteTodo: function(todo){
todo.destroyRecord();
}
}
});
I was wondering if someone could give me brief direction. I'm making an app that I want to be able to take notes from anywhere I'm at in the app (CRUD). I'm rendering my presentations in my application controller using {{render}} but I'm not sure how to put the full crud operations there as well. This is what I have so far:
-- Presentation Controller
import Ember from 'ember';
var PresentationController = Ember.ObjectController.extend({
actions: {
edit: function () {
this.transitionToRoute('presentation.edit');
},
save: function () {
var presentation = this.get('model');
// this will tell Ember-Data to save/persist the new record
presentation.save();
// then transition to the current user
this.transitionToRoute('presentation', presentation);
},
delete: function () {
// this tells Ember-Data to delete the current user
this.get('model').deleteRecord();
this.get('model').save();
// then transition to the users route
this.transitionToRoute('presentations');
}
}
});
export default PresentationController;
-- Presentations Controller
import Ember from 'ember';
var PresentationsController = Ember.ArrayController.extend({
actions: {
sendMessage: function ( message ) {
if ( message !== '') {
console.log( message );
}
}
}
});
export default PresentationsController;
-- Model
import DS from 'ember-data';
var Presentation = DS.Model.extend({
title: DS.attr('string'),
note: DS.attr('string')
});
-- Presentations Route
import Ember from 'ember';
var PresentationsRoute = Ember.Route.extend({
model: function() {
return this.store.find('presentation');
}
});
export default PresentationsRoute;
-- Presentation Route
import Ember from 'ember';
var PresentationRoute = Ember.Route.extend({
model: function (params) {
return this.store.find('presentation', params.id);
}
});
export default PresentationRoute;
-- Application Route
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return this.store.find('category');
},
setupController: function (controller, model) {
this._super(controller, model);
controller.set('product', this.store.find('product'));
controller.set('presentation', this.store.find('presentation'));
}
});
-- Application HBS
<section class="main-section">
<div id="main-content">
{{#link-to "presentations.create" class="create-btn expand" tagName="button"}} Add presentation {{/link-to}}
{{render 'presentations' presentation}}
{{outlet}}
</div>
</section>
-- Presentations HBS
{{#each presentation in controller}}
{{#link-to 'presentation' presentation tagName='li'}}
{{presentation.title}}
{{/link-to}}
{{/each}}
{{outlet}}
-- Presentation HBS
{{outlet}}
<div class="user-profile">
<h2>{{title}}</h2>
<p>{{note}}</p>
<div class="btn-group">
<button {{action "edit" }}>Edit</button>
<button {{action "delete" }}>Delete</button>
</div>
</div>
Basically what you're describing is a modal of sorts. It'll be accessible no matter what page (route) you're viewing, and you will be able to perform actions within this modal (creating notes, editing notes, deleting notes, etc) without leaving or affecting the current page being displayed in the background. Essentially, what this means is that you should leave the router alone, since the router is what controls the current page, and you don't want to affect that. You're not going to want to have any {{#link-to}} or transitionTo or transitionToRoute calls, nor any presentation-related routes or outlets.
Instead, you're going to have to handle everything at the controller and view level. This is where components really come in handy, as they're great for encapsulation if you use them correctly. Inside of presentations.hbs, I'd use components to represent each of the presentations:
{{#each presentation in controller}}
{{individual-presentation presentationModelBinding="presentation"}}
{{/each}}
Note that you'll need a corresponding IndividualPresentationComponent object that extends Ember.Component. Going further, inside of individual-presentation.hbs, I'd have code similar to what you have now, but with allowances for various CRUD operations:
{{#if editing}}
{{input value=presentationModel.title}}
{{textarea value=presentationModel.note}}
{{else}}
<h2>{{title}}</h2>
<p>{{note}}</p>
{{/if}}
<div class="btn-group">
{{#if editing}}
<button {{action "save" }}>Save</button>
{{else}}
<button {{action "edit" }}>Edit</button>
{{/if}}
<button {{action "delete" }}>Delete</button>
</div>
Note that the context for a component's template is the component itself, not some other controller. Similarly, actions fired inside of a component's template are direct to the component's actions hash. So your IndividualPresentationComponent will need to look like this somewhat:
IndividualPresentationComponent = Ember.Component.extend({
classNames: ['user-profile'],
actions: {
save: function () {
this.sendAction('save', this.get('presentationModel'));
this.set('editing', false);
},
edit: function () {
this.set('editing', true);
},
delete: function () {
this.sendAction('delete', this.get('presentationModel'));
}
}
});
Notice I'm using sendAction here. This is how components communicate with the outside world. To get this to work, go back your presentations.hbs and intercept the actions like so:
{{#each presentation in controller}}
{{individual-presentation presentationModelBinding="presentation"
save="savePresentation"
delete="deletePresentation"}}
{{/each}}
Here you're basically saying that if the component sends the "save" action, you want to handle it with your controller's "savePresentation" action, and if the component sends the "delete" action, you want to handle it with your controller's "deletePresentation" action. So your presentations-controller.js will need to implement those actions:
var PresentationsController = Ember.ArrayController.extend({
actions: {
savePresentation: function (presentationModel) {
...
},
deletePresentation: function (presentationModel) {
...
},
}
});
And you can delete PresentationController, since all of its functionality is now handled directly by your IndividualPresentationComponent and your PresentationsController.