I have the need to act on the HTML element which triggers an Ember action.
The scenario is simple, let's say I have multiple rows of items, each having an action that pulls some data via an ajax. I want to disable that particular element until the ajax request has completed.
I checked this property but it refers to the Component Class.
So in the below markup, I'd like to capture the element in my component class.
<td><button {{action 'cancel' transaction}} class="btn-danger btn">Cancel</button></td>
There is not a default way to disable actions in Ember.
You could do it in several ways:
1) With CSS and bound controller properties.
a.is-inactive {
pointer-events: none;
cursor: default;
}
Then you must bind the className to the controller property (Inactive).
<a {{action 'cancel'}} {{bind-attr class="isInactive:is-inactive"}}
2) You could check in your route action that your actions is disabled. Use any specific controller to save the application state.
cancel: function() {
var controller = this.controller;
if ( controller.get('pendingAction') ) return;
controller.set('pendingAction', true);
this.ajax(...., function() {
....
controller.set('pendingAction', false);
}, function() {
....
controller.set('pendingAction', false);
});
}
3) Built your own way..
I have discussed this case at the discourse forum.
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
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();
}
}
I have a notification view responsible for displaying global messages at the top of the page (info, warning, confirmation messages ...)
I created a NotificationView for the purpose, defined its content property and provided two handlers to show and hide the view.
APP.NotificationView = Ember.View.extend({
templateName: 'notification',
classNames:['nNote'],
content:null,
didInsertElement : function(){
},
click: function() {
var _self = this;
_self.$().fadeTo(200, 0.00, function(){ //fade
_self.$().slideUp(200, function() { //slide up
_self.$().remove(); //then remove from the DOM
});
});
_self.destroy();
},
show: function() {
var _self = this;
_self.$().css('display','block').css('opacity', 0).slideDown('slow').animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
}
});
Ideally, i should be able to send an event from any controller or route to show the view with the proper content and styling. What would be the best way to architect this
I thought of using a named outlet in my application's template, however outlets are not quite suited for dynamic views.
<div id="content">
{{outlet notification}}
{{outlet}}
</div>
I was also thinking of architecting the notification view to be a response to "The application" or "A Module" state.
Because you have animations you want to run when the notifications change, you will want to create a subclass of Ember.View (a "widget"):
App.NotificationView = Ember.View.extend({
notificationDidChange: function() {
if (this.get('notification') !== null) {
this.$().slideDown();
}
}.observes('notification'),
close: function() {
this.$().slideUp().then(function() {
self.set('notification', null);
});
},
template: Ember.Handlebars.compile(
"<button {{action 'close' target='view'}}>Close</button>" +
"{{view.notification}}"
)
});
This widget will expect to have a notification property. You can set it from your application template:
{{view App.NotificationView id="notifications" notificationBinding="notification"}}
This will gets its notification property from the ApplicationController, so we will create a couple of methods on the controller that other controllers can use to send notifications:
App.ApplicationController = Ember.Controller.extend({
closeNotification: function() {
this.set('notification', null);
},
notify: function(notification) {
this.set('notification', notification);
}
});
Now, let's say we want to create a notification every time we enter the dashboard route:
App.DashboardRoute = Ember.Route.extend({
setupController: function() {
var notification = "You have entered the dashboard";
this.controllerFor('application').notify(notification);
}
});
The view itself manages the DOM, while the application controller manages the notification property. You can see it all working at this JSBin.
Note that if all you wanted to do was display a notification, and didn't care about animations, you could just have done:
{{#if notification}}
<div id="notification">
<button {{action "closeNotification"}}>Close</button>
<p id="notification">{{notification}}</p>
</div>
{{/if}}
in your application template, with the same ApplicationController, and everything would just work.
I don't agree that Notifications should be a View, I think they should be a Component. Then they are also more flexible to be used across your application.
You could a Notification Component instead as answered here: How can I make an Alert Notifications component using Ember.js?
I have a view where there can be a large number of items for the user to scroll through and I'd like to implement infinite scrolling to enable progressive loading of the content.
It looks like some folks have done pagination but Google doesn't bring up anyone discussing how they've done infinite lists with Ember/Ember Data. Anyone already worked through this and have a blog post/example code to share?
I've implemented an infinite scroll mechanism at the GitHub Dashboard project, I'm currently developing. The feature is added in commit 68d1728.
The basic idea is to have a LoadMoreView which invokes the loadMore method on the controller every time the view is visible on the current viewport. I'm using the jQuery plugin inview for this. It allows you to register for an inview event, which is fired when the element of the specified selector is visible on screen and when it disappears.
The controller also has properties which indicate whether there are more items to load and if there are currently items fetched. These properties are called canLoadMore and isLoading.
The LoadMoreView basically looks like this:
App.LoadMoreView = Ember.View.extend({
templateName: 'loadMore',
didInsertElement: function() {
var view = this;
this.$().bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) Ember.tryInvoke(view.get('controller'), 'loadMore');
});
}
});
where the loadMore template is defined as follows:
{{#if isLoading}}
fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
{{else}}
{{#if canLoadMore}}
<a {{action "loadMore" target="controller" }}>click to load more items</a>
{{else}}
<i>no more items</i>
{{/if}}
{{/if}}
The controller which handles the fetching of more items is then implemented as follows. Note that in the loadMore method a query on the store is performed, which loads a specific page of of entries for a model.
App.EventsController = Ember.ArrayController.extend({
currentPage: 1,
canLoadMore: function() {
// can we load more entries? In this example only 10 pages are possible to fetch ...
return this.get('currentPage') < 10;
}.property('currentPage'),
loadMore: function() {
if (this.get('canLoadMore')) {
this.set('isLoading', true);
var page = this.incrementProperty('currentPage');
// findQuery triggers somehing like /events?page=6 and this
// will load more models of type App.Event into the store
this.get('store').findQuery(App.Event, { page: page });
} else {
this.set('isLoading', false);
}
}
});
The only thing left is to initially set the content of the controller to the result of a filter function, so the content is updated when new models are loaded into the store (which happens due to the findQuery method in the loadMore of the controller). Also, a query hash is added when the filter is invoked. This ensures that an initial query to the server is made.
App.eventsController = App.EventsController.create({
content: []
});
var events = App.store.filter(App.Event, { page: 1 }, function(data) {
// show all events; return false if a specific model - for example a specific
// type of event - shall not be included
return true;
});
Were you aware of the newly released Ember.ListView component?
https://github.com/emberjs/list-view
It was announced at the February San Francisco Ember Meetup. Here's a slidedeck from Erik Bryn, one of the Ember Core developers about using it:
http://talks.erikbryn.com/ember-list-view/
I'm writing an infinite pagination plugin for Ember based on #pangratz's work.
Please fire any issues on there if you have questions or improvements that you'd like.
I would recommend using Ember Infinity addon. It supports Ember 1.10 through to 2.0+. It's relatively easy to setup. You only need to modify your route and template.
Route (Product is example model):
import InfinityRoute from 'ember-infinity/mixins/route';
export default Ember.Route.extend(InfinityRoute, {
model() {
/* Load pages of the Product Model, starting from page 1, in groups of 12. */
return this.infinityModel('product', { perPage: 12, startingPage: 1 });
}
});
Template:
{{#each model as |product|}}
...
{{/each}}
{{infinity-loader infinityModel=model}}
When {{infinity-loader}} component becomes visible it sends an action to your route, so it knows to update model array with new (fetched) records.
First request will be sent to:
/products?per_page=12&page=1
So you also need to prepare your backend API to handle these query params. It's obviously customizable, take a look at Advanced Usage section of Readme.
Note:
Both using ListView (#commadelimited's answer) and views with ArrayController (#pangratz's answer) is deprecated/removed as of Ember 2.0 being stable version.
I would like to know if it is possible to assign an action to a view like I could assign an action to a HTML tag:
This works:
<button {{action "show2" }}>Test 1</button>
This doesn't:
{{#view NewApp.MenuButton }}
{{action "show3" target="controller"}}
{{/view}}
I know that I could implement the click function in the view. But I would like to use the button as some sort of reusable component.
You typically want to use the Handlebars action helper on an HTML element, not on an Ember.View.
Since you want to attach an event to the NewApp.MenuButton View you, define the event in your view class definition. For example, here we handle the click event:
NewApp.MenuButton = Ember.View.extend({
click: function(event){
// When the user clicks this view,
// this function will be called.
// ... handle the click
App.myController.menuButtonWasClicked();
}
});
If the event you want to attach is not one of the built-in events, you can register your own events. Find the built-in supported events and how to register custom events here: Ember.js - Events
Edit: You say you want to be able to reuse it. You can define a mixin for attaching arbitrary events and targeting arbitrary objects:
Ember.MyEventAttacher = Ember.Mixin.create({
init: function() {
var action = this.get('action');
target = this.get('target'),
targetObj = Ember.getPath(target);
if (action && targetObj) {
var targetEventFnc = targetObj[action];
if (typeof targetEventFnc === 'function') {
var actionFnc = function(event) {
targetEventFnc(event);
}
this.set(action, actionFnc);
}
this._super();
}
});
Include the Mixin in your View:
NewApp.MenuButton = Ember.View.extend(Ember.MyEventAttacher);
And then re-use this view in your templates, making sure to define the action and target properties. Example:
{{#view NewApp.MenuButton action="show3" target="NewApp.myController"}}
<!-- ... -->
{{/view}}
Targeting:
NewApp.myController = Ember.Controller.create({
show3: function(event) {
// the event is sent here!
}
});