Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.js - How to trigger view method from controller?

Tags:

I'm trying to call view method from controller, but no idea how to do this. From view I can easily call controller method like this.get('controller').send('method');

How to do something like that from controller this.get('view').send('method');?

To give you better overview what I'm trying to do.

I have application controller Ember.Controller.extend({}) I have application view Ember.View.extend({}) and application template.

In application template is login form, when user submit it controller method is executed. In this method if login credentials are incorrect I need to call view method which is executing jQueryUI method on login form (shake method to be exact and showing some text).

like image 617
Wojciech Bednarski Avatar asked Apr 13 '13 19:04

Wojciech Bednarski


People also ask

How do you call a method in Ember js?

You have to use this. send([methodName]) in order to get your methods called correctly: var App = Ember. Application.

Is Ember js MVC?

Ember. js is a MVC (Model-View-Controller) JavaScript framework used to develop large client-side web applications. In comparison to other JavaScript MVC frameworks, it gives you the ability to write organized and structured code.

How does Ember js work?

Ember. js uses Handlebars, a lightweight templating engine also maintained by the Ember team. It has the usual templating logic, like if and else , loops and formatting helpers , that kind of stuff. Templates may be precompiled (if you want to cleanly organize them as separate .


2 Answers

This sounds like a good use for Ember.Evented. By using event subscription and dispatching you can avoid coupling your view and controller.

Simply mixin Ember.Evented:

Controller = Ember.Controller.extend(Ember.Evented) 

Now you can call on and trigger methods on your controller, to subscribe to an event and then to kick off the event. So, in your view you might do:

didInsertElement: function () {     this.get('controller').on('loginDidFail', this, this.loginFail); } 

And then in your controller call this.trigger('loginDidFail') to kick off your loginFail view method.

Remember to remove the handler after the view is dismissed... see the answer below.

like image 90
Christopher Swasey Avatar answered Oct 04 '22 01:10

Christopher Swasey


Just wanted to answer on this question to address the issue with properly removing the listener if the view is cleared (when the route changes). It's also not necessary to use a jquery proxy, since the on/off methods support a target, which is good because unsubscribing a proxy is definitely more complicated. Revising what Christopher provided:

didInsertElement: function() {   this.get('controller').on('loginDidFail', this, this.loginFail); },  willClearRender: function() {   this.get('controller').off('loginDidFail', this, this.loginFail); } 

Without removing the subscription any subsequent visits to the login route (without reloading the page) will add additional listeners; i.e. memory leaks, errors, and unexpected behavior.

like image 37
Aaron Storck Avatar answered Oct 04 '22 00:10

Aaron Storck