We have recently shifted from ember 2+ to Ember 3.18.0 and i am struggling to call the controller function from a component. In previous version we were using sendAction to bubble the action but now as sendAction is depreciated and closures are being used i am not able to make it correctly.
Below is my code
Controller.hbs
{{generic-err-modal err=receivedErr showDialog= this.showErrorModal onSave=(action "closePromptDialog")}}
Controller.js
#action
closePromptDialog(){
this.set("showErrorModal",false);
}
Component.hbs
{{#if #showDialog}}
<PaperDialog id="genericModal" class="flex-50" #fullscreen={{fullscreen}} #onClose={{action "closePromptDialog"}} #origin={{dialogOrigin}}>
<PaperDialogContent class="text-align-center">
{{paper-icon "remove_circle_outline" class="red" size=48}}
</PaperDialogContent>
<PaperDialogContent>
<h2>{{#err.errorMessage}}</h2>
</PaperDialogContent>
<PaperDialogActions #class="layout-row">
<span class="flex"></span>
<PaperButton #primary={{true}} #onClick={{action "hideModal"}} #raised={{true}}>Ok</PaperButton>
</PaperDialogActions>
</PaperDialog>
{{/if}}
Component.js
#action
hideModal(){
this.args.onSave();
}
on this i am getting error as
Uncaught TypeError: method is not a function
Any help will be very much appreciated.
Ember version i am using is 3.18.0
From Octane edition, everything becomes more explicit in Ember 😃 One such thing is the {{action}} helper to pass functions. In classic (pre-octane) model, when passing a string to the action helper like, {{action "closePromptDialog"}}, Ember will search for the action closePromptDialog inside the actions hash of the corresponding controller as mentioned in the example in the guide.
Since the introduction of native class and #action decorator, we don't have to use the {{action}} helper as well as actions hash. We can directly pass the method to the component without action helper as mentioned in the guides of 3.18. So,
Controller.hbs:
{{generic-err-modal
err=receivedErr
showDialog=this.showErrorModal
onSave=this.closePromptDialog
}}
Here, this.closePromptDialog will directly refer to the method in the backing class similar to any other class property like, receivedErr, in your case. The proper this binding will be taken care of by the #action decorator. The same is applicable for your actions inside Component.hbs file.
Related
so i have a parent in controller like this
import Controller from '#ember/controller';
export default class IndexController extends Controller {
#service firebaseApp;
#service fastboot;
#tracked user =false;
async init(){
super.init(...arguments);
if (!this.fastboot.isFastBoot){
const auth = await this.firebaseApp.auth();
auth.onAuthStateChanged((user)=>{
if(user){
this.user = true
} else {
this.user = false
}
})
}
}
then call a component loadData like this
<LoadData #user={{this.user}}/>
the question is how to execute a function inside component loadData when #user change?
Triggering an action when an argument changes is not that well supported by Ember Octane primitives yet. A common approach is to use either #ember/render-modifiers or ember-render-helpers.
#ember/render-modifiers provide a {{did-update}} modifier.
ember-render-helpers provide a {{did-update}} helper. Both the modifier and the helper except a function as first position argument. That function is executed whenever one of the other positional arguments changes.
{{did-update}} modifier is helpful when the function executed needs access to a DOM element. It sets the DOM element, which it is attached to, as an argument on the function when called.
{{did-update}} helper is helpful when the function executed does not need access to a DOM element.
{{! A Glimmer template }}
{{! did-update helper }}
{{did-update this.loadData #user}}
{{! did-update modifier }}
<div class="loading" {{did-update this.showLoadingSpinner #user}} />
The main use case for {{did-update}} modifier is to ease the migration from classical #ember/component to #glimmer/component. In nearly all cases a specific modifier containing the logic, which should be executed, itself is a better solution. It provides better reusability, can be tested in isolation and has clear boundaries to the components in which it is used.
The main use case for {{did-update}} helper is to fill a gap in current Ember Octance programming model. Ember Octance provides an awesome developer experience for derived state thanks to autotracking and native getters. It provides a great experience to modify a DOM element depending on a value. But it does not have great primitives yet to trigger actions like data loading when an argument changes.
The community current experiments with different approaches to fill that gap. It seems to settle on #use decorator and resources as proposed by Chris Garret (pzuraq) in an RFC and in a recent blog post. It's available for experiments as part of ember-could-get-used-to-this package.
The {{did-update}} helper provided by ember-render-helpers is the most established solution to fill that gap until something like resources settle in Ember.
I've got openModal action defined on application route. I'm trying to call this action from within a component.
If I use syntax for action bubbling:
{{my-component openModal="openModal"}}
then everything works as expected and I can trigger this action using this.sendAction("openModal").
However, I'm not sure how to get the same result using the new closure syntax:
{{my-component openModal=(action "openModal")}}
In this case, Ember complains that there's no action openModal defined on the controller. Do I have to define this action on every controller that uses my-component? Is there a way to somehow use target option to tell Ember that this action is defined on a route? Is it ok to mix bubbling and closure syntax in a single component?
I'm using Ember 2.0 beta 1.
Until routable components are introduced somewhere in Ember 2.1 or 2.2 or 2.3 or 2.4 or 2.5 or 2.6 or 2.7, it is impossible to pass a closure action from a route.
For now, you can only pass closure actions from a controller and on to child components.
UPD: Miko Paderes hints that an addon is available: https://github.com/dockyard/ember-route-action-helper
Try this:
{{my-component openModal=(action send "openModal")}}
...which makes use of the send method on the controller.
I can't say I fully understand it given that the second argument to send is the context but it is still passing additional arguments to my action in the route correctly. I'm currently using version 2.4.5.
You can send closure actions to the route by proxying them through the controller. This works with any Ember version that supports closure actions. The only caveat is that the action name must differ from controller and route.
For instance, given this template:
{{foo-component myAction=(action 'foo')}}
You would need a foo action on your controller, which could proxy to the route:
proxyFooTo: 'fooBar',
actions: {
foo(context) {
this.send('proxyFooTo', context);
}
}
Then on the route
actions: {
fooBar(context) { ... handle fooBar ... }
}
It is also possible to avoid creating a controller, or if there is one already avoid adding more logic in it, by specifying the target property
http://emberjs.jsbin.com/fiwokenoyu/1/edit?html,js,output
in route
js
setupController(controller,model){
this._super(...arguments);
controller.set('theRoute', this);
},
actions:{
openModal(data){
/*...*/
}
}
in template
hbs
{{my-component openModalAction=(action 'openModal' target=theRoute)}}
Try the Ember add-on called ember-route-action-helper,
https://github.com/dockyard/ember-route-action-helper
You can just replace route-action with action at the time "routable- components" become available.
{{todo-list todos=model addTodo=(route-action "addTodo")}}
So the code above has a similar effect as
Inside the route,
setupController(controller,model){
this._super(...arguments);
controller.set('theRoute', this);
},
actions:{
addTodo(data){
/*...*/
}
}
Inside the HBS,
{{todo-list addTodo=(action 'addTodo' target=theRoute)}}
Cannot get my head around the following problem. I got a Uncaught TypeError: Cannot read property 'send' of undefined whatever I try. I think it must be the controllerBinding in the itemsViewClass, however I think it is defined correctly.
In the code below there are two showMenu actions. The first one works, but the last one in the itemsViewClass does not.
Please take a look at my code below (I show only the relevant code):
//views/menu.js
import Ember from "ember";
var MenuitemsView = Ember.View.extend({
template: Ember.Handlebars.compile('<div{{action "showMenu" target="view"}}>this works already</div>\
much more code here'),
contentBinding: 'content',
itemsView: Ember.CollectionView.extend({
contentBinding: 'parentView.subCategories',
itemViewClass: Ember.View.extend({
controllerBinding: 'view.parentView.controller', // tried to add controllerBinding but did not help
// this is where the question is all about
template: Ember.Handlebars.compile('<div {{action "showMenu" target="parentView"}}>dummy</div>')
}),
actions: {
showMenu: function(){
// dummy for testing
console.log('showmenu itemsView');
}
}
}),
actions: {
showMenu: function() {
console.log('showMenu parentView!'); // how to reach this action?
}
}
});
export default MenuitemsView;
I have tested with {{action "showMenu" target="view"}} and without a target. It seems not to help.
Do someone have a clue why the second showMenu action cannot be reached?
OK, so this is by no means the only way to do logic separation in Ember, but it's the method I use, and seems to be the method generally used in the examples across the web.
The idea is to think of events and actions as separate logic pools, where an event is some manipulation of the DOM itself, and an action is a translatable function that modifies the underlying logic of the application in some way.
Therefore, the flow would look something like this:
Template -> (User Clicks) -> View[click event] -> (sends action to) -> Controller[handleLogic]
The views and the controllers are only loosely connected (which is why you can't directly access views from controllers), so you would need to bind a controller to a view so that you could access it to perform an action.
I have a jsfiddle which gives you an idea of how to use nested views/controllers in this way:
jsfiddle
If you look at the Javascript for that fiddle, it shows that if you use the view/controller separation, you can specifically target controllers to use their actions, utilising the needs keyword within the controller. This is demonstrated in the LevelTwoEntryController in the fiddle.
At an overview level, what should happen if your bindings are correct, is that you perform an action on the template (either by using a click event handler in the view, or using an {{action}} helper in the template itself, which sends the action to the controller for that template. Which controller that is will depend on how your bindings and routing are set up (i've seen it where I've created a view with a template inside a containerView, but the controller is for the containerView itself, not the child view). If the action is not found within that controller, it will then bubble up to the router itself (not the parent controller), and the router is given a chance to handle the action. If you need to hit a controller action at a different level (such as a parent controller or sibling), you use the needs keyword within the controller (see the fiddle).
I hope i've explained this in an understandable way. The view/controller logic separation and loose coupling confused me for a long time in Ember. What this explaination doesn't do, is explain why you are able to use action handlers in your view, as I didn't even know that was possible :(
I'm trying to implement an action on a controller and get the warning:
DEPRECATION: Action handlers implemented directly on controllers are deprecated in favor of action handlers on an actions object
If I use Em.ObjectController.create(), when I click my button I get a warning stating that actions must be provided at extend time. However, if I use Em.ObjectController.extend(), when I click the button I get an error saying the action did not exist on the controller.
I created a jsBin to view this
//App.ToolbarController = Ember.ObjectController.create({
App.ToolbarController = Ember.ObjectController.extend({
model: { fu: "baar" },
actions: {
doSomethingUseful: function(data) {
console.log("doing nothing useful...");
}
}
});
I took a look at your jsBin
First off in the future its easier to debug your templates if you post them as an embedded script tag instead of the compiled handlebars function.
I've made a bin that fixes your issue.
I believe your issue had to do with the method you were using to create your view.
{{view App.ToolbarView controllerBinding="App.ToolbarController"}}
I'm not sure if that works properly.
Instead you should use the render helper
{{ render 'toolbar' }}
That way ember will try to find the toolbar view, controller and template and wire them all together properly.
How do I run a function after an Ember View is inserted into the DOM?
Here's my use-case: I'd like to use jQuery UI sortable to allow sorting.
You need to override didInsertElement as it's "Called when the element of the view has been inserted into the DOM. Override this function to do any set up that requires an element in the document body."
Inside the didInsertElement callback, you can use this.$() to get a jQuery object for the view's element.
Reference: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js
You can also use afterRender method
didInsertElement: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
//Put your code here what you want to do after render of a view
});
}
Ember 2.x: View is deprecated, use component instead
You have to understand the component's lifecycle to know when does certain things happen.
As components are rendered, re-rendered and finally removed, Ember provides lifecycle hooks that allow you to run code at specific times in a component's life.
https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/
Generally, didInsertElement is a great place to integrate with 3rd-party libraries.
This hook guarantees two (2) things,
The component's element has been both created and inserted into the DOM.
The component's element is accessible via the component's $() method.
In you need JavaScript to run whenever the attributes change
Run your code inside didRender hook.
Once again, please read the lifecycle documentation above for more information
Starting with Ember 3.13, you can use components that inherit from Glimmer, and this example below shows what that could look like:
import Component from '#glimmer/component';
import { action } from '#ember/object';
/* global jQuery */
export default class MyOctaneComponent extends Component {
#action configureSorting(element) {
jQuery(element).sortable();
}
}
<div {{did-insert this.configureSorting}}>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
These view style components don't have lifecycle hooks directly, instead, you can use render-modifiers to attach a function. Unofficial introduction to modifiers can be found here
The benefit of this is that, it's clearer what the responsibilities of the template are and become.
Here is a runnable codesandbox if you want to play around with this:
https://codesandbox.io/s/octane-starter-ftt8s
You need to fire whatever you want in the didInsertElement callback in your View:
MyEmberApp.PostsIndexView = Ember.View.extend({
didInsertElement: function(){
// 'this' refers to the view's template element.
this.$('table.has-datatable').DataTable();
}
});