Ember.js What is the difference between the setupController and declaring a <Name>Controller
setupController
is primarily for setting up some controller context dynamically. In your example, if the title is always gonna be "Hello world!" it's fine to set it in class declaration.
By default, setupController
will set the model
property of controller
to the value returned from model
hook of the route.
You could also you it to, for example, set the model of another controller, or set some initial controller state that depends on the model.
For example, suppose you have the following:
// Model
App.Post = DS.Model.extend({
title: DS.attr('string'),
text: DS.attr('string'),
autoEdit: DS.attr('string')
});
// Controller
App.PostController = Ember.ObjectController.extend({
isEditing: null,
toggleEdit: function() { this.toggleProperty('isEditing'); }
});
Template:
<a href="#" {{action 'toggleEdit'}}>Toggle edit mode</a>
{{#if isEditing}}
{{input type="text" value=title placeholder="Title"}}
{{textarea type="text" value=text placeholder="Text"}}
{{else}}
<h1>{{title}}<h1>
<article>{{text}}</article>
{{/if}}
And then, you decide that it would be nice to turn editing mode on by default for posts with autoEdit
equal to true
. You'll probably want to do that in the route (since the controller, when instantiated, knows nothing about the model):
App.PostRoute = Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller, model);
if (model.get('autoEdit')) {
controller.set('isEditing', true);
}
}
});
So basically, it's for "initializing" the controller (setting model and default state).
Related videos on Youtube
Canttouchit
Updated on September 14, 2022Comments
-
Canttouchit over 1 year
I see many confusing examples in Ember.js official tutorials.
One example which I really don't like is:
App.ApplicationRoute = Ember.Route.extend({ setupController: function(controller) { controller.set('title', "Hello world!"); } }); App.ApplicationController = Ember.Controller.extend({ appName: 'My First Example' });
Now as I understand it I could have written it like that instead:
App.ApplicationController = Ember.Controller.extend({ appName: 'My First Example', title: 'Hello world!' });
And removing the
setupController
from route.What is the purpose/benefit of using
setupController
? -
Canttouchit over 10 yearsI don't quite understand why dynamic context cannot be handled in class declared controller, can you give me and example.
-
Gosha A over 10 yearsBecause when controller is instantiated, there is no model, initially, so you can't set some default state properly if it depends on the model attributes.
-
Canttouchit over 10 yearsStill I can set model hooks in the route, I still don't understand. Route is rendering model to controller why does it matter if I change it from
setupController
or from the controller class -
Gosha A over 10 yearsActually, it's
setupController
which sets the model that the model hook returned to the controller (setupController
does that by default, but of course you're free to change that).setupController
is good if your controller has some initial state that depends on the model. -
Canttouchit over 10 yearsI'd be happy to see an example, it is hard for me to understand i'm new to Ember.
-
Gosha A over 10 yearsI've added an example to my answer on what
setupController
can be used for. -
Canttouchit over 10 yearsThis is a nice example but please look at emberjs.com/guides/getting-started/… there is an example there to editing property on existing model without using setupController
-
Gosha A over 10 yearsPlease note that
isEditing
is not in the model (it does not need to be persisted), it's on the controller.isEditing
simply holds some state of the current controller, i.e. whether the editing mode is on or off. The example you're linking to goes just by changing some model property, and of course there's no controller state involved. -
Canttouchit over 10 yearsThanks a lot for the explanation!
-
SuperUberDuper about 9 yearswould you use setupController for initing a Peer.js connection, or inside the init event in the controller?
-
ahnbizcad about 9 yearsA simple, explicit explanation of what the setupController does: "So basically, it's for "initializing" the controller (setting model and default state)." I wish most official documentation was as straightforward as this.