I have sort of a general question on how the controller needs property works with regard to mixins
Lets say I have a shopping card model that resides in the application controller so it's available everywhere in the app
// application route
export default Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller, model);
controller.set('cart', this.store.createRecord('cart'));
}
});
Now any other controller that needs to use the cart, I want to provide a mixin:
// mixins/cart-access
export default Ember.Mixin.create({
needs: ['application'];
cart: Ember.computed.alias('controllers.application.cart')
});
// some controller
export default Ember.Controller.extend(CartAccess, {});
This is all well and good, but will it cause problems if in another controller I set the needs property to something else?
// some other controller
export default Ember.Controller.extend(CartAccess, {
needs: ['some-other-controller'] // not inlcuding application
});
Went ahead and did an experiment, and the needs from the mixin will be merged with the needs from the controller.
Example: https://github.com/DVG/need-experiment
//application route
export default Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller, model);
controller.set('hello', "Hi!")
}
});
//hi mixin
export default Ember.Mixin.create({
needs: ['application'],
hello: Ember.computed.alias("controllers.application.hello")
});
//people contntroller
import Hi from 'needs/mixins/hi';
export default Ember.Controller.extend(Hi,{});
//posts controller
import Hi from 'needs/mixins/hi';
export default Ember.Controller.extend(Hi, {
needs: ['something-else']
});
//posts.hbs
{{hello}}
{{needs}}
The posts template displays "Hi!" and application,something-else
Related
I am very new to ember.js.
I have the following code which I need to change to retrieve data from the server using multiple models (using multiple JSON/RESTful calls).
This (single model version) WORKS:
In app/routes/index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').queryRecord('wallet', {balance: true});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{wallet.balance}} </div>
I changed to this and it WORKS:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
wallet: this.get('store').queryRecord('wallet', {balance: true})
});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{wallet.wallet.balance}} </div>
BUT if I change to the following ("wallet" -> "anythingelse"), it WON'T WORK:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
anythingelse: this.get('store').queryRecord('wallet', {balance: true})
});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{anythingelse.wallet.balance}} </div>
I'm trying to understand why. Where is it picking up from for the definintion "wallet" - and why changing to "anythingelse" won't work? Where else is the code for "wallet" referring to?
Components are isolated from their surroundings, so any data that the component needs has to be passed in. so you need to understand how to pass properties to component.
I assume, in all the above three examples you are including wallet-balance component like this.
{{wallet-balance wallet=model}}
If you want to make {{anythingelse.wallet.balance}} this one work for 3rd example, then you need to include the component like {{wallet-balance wallet=model.anythingelse}}
For debugging in template hbs file, you can make use of log helper, like {{log 'model object' model}} this will print model object in console.
Here is the reasoning behind the screen,
Whatever is returned from model hook will be set in corresponding controller's model property by default through setupController hook method.
In your case, you didn't override setupController so default behavior is applicable.
return this.get('store').queryRecord('wallet', {balance: true});
queryRecord will return Promise and it will be resolved to single record wallet and it will be set in controller's model property. now model is equivalent to single wallet record object. you can access it in template `{{model.balance}}
return RSVP.hash({
anythingelse: this.get('store').queryRecord('wallet', {balance: true})
});
queryRecord will return Promise and it will be resolved to single record wallet and it will be set in inside the object {anythingelse:walletRecord} now model is equivalent to {anythingelse:walletRecord}. you can access it in template like {{model.anythingelse.balance}}
You need to set your model in setupController().
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return this.get('store').queryRecord('wallet', {balance: true});
},
setupController(controller, wallet) {
controller.set('wallet', wallet);
}
});
Hope this helps.
I'm trying to use setupController method to pass some data to the controller from the route and it only works if the controller is a singleton.
The setupController method is called in both situations but the variables are only set on the controller if it's a singleton.
How can I pass data from a route to a transient controller?
Here's a twiddle:
http://ember-twiddle.com/ba55734e925664e363f4
Uncomment/comment the following line to toggle between singleton/transient:
//application.register('controller:application', 'ApplicationController', { singleton: false });
I have not been able to find any information about whether or not this should work. I'm using Ember 1.13.6.
controllers/application.js:
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
initializers/application.js:
export function initialize(container, application) {
//application.register('controller:application', 'ApplicationController', { singleton: false });
}
export default {
name: 'application-init',
initialize: initialize
};
routes/application.js:
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller,model) {
this._super(controller,model);
controller.var1 = "Variable 1";
}
});
templates/application.hbs:
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{var1}}
<br>
This appears to be an actual bug, since the instance of the controller is different from the instance you have in setupController and the one backing the view.
A workaround would be overriding the renderTemplate hook on your route to pass the instance of the controller versus a string reference which is looked up by default (and creating a new instance of the controller!).
export default Ember.Route.extend({
setupController(controller, model) {
this._super(...arguments);
controller.set('var1', 'foo');
},
renderTemplate(controller, model) {
// note: don't call super here
this.render('application', {
controller: controller,
model: model
});
}
});
I'm trying to set queryParams in an Ember controller, but they don't seem to be updating the URL at all.
I have this abbreviated mixin being applied to the route:
import Ember from 'ember';
import ControllerPaginationMixin from './controller-pagination';
export default Ember.Mixin.create({
setupController(controller, model) {
this._super(controller, model);
controller.reopen(ControllerPaginationMixin);
}
});
And here's the abbreviated controller mixin that is applied above:
import Ember from 'ember';
export default Ember.Mixin.create({
sortKey: null,
queryParams: ['sortKey'],
actions: {
sort(key) {
this.set('sortKey', key);
}
});
When I call the sort method from a component, I can see in the Ember Inspector that the sortKey property has been changed to the correct new value, but the URL remains unchanged. Am I missing something?
Your problem is that you're trying to customize the controller class at the runtime.
You will reopen the controller every time a user visits the route, that's ridiculous.
Simply extend the controller definition with the mixin and you're good to go.
I'm build a list-view, which renders a list of records in a table. The list-view is build as a reusable mixin, and has a reusable template as well. I want the list-view to be as easy to use as possible, and not have to write too much code, to make it work - but only overwrite what I want to change.
Idealy I only want to tell the controller (or perhaps even better) the router, that it's going to render a list-view, and only render custom template, if I have one defined.
Example:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Route.extend(MixinList, {
model: function() {
return this.store.find('category');
}
});
Currently I have to write this code, to make the list-view work:
Categories route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('category');
}
});
Categories controller:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Controller.extend(MixinList, {
actions: {
itemAction: function(actionName, item) {
if (actionName === 'edit') {
this.transitionToRoute('categories.edit', item.get('id'));
}
}
}
});
Categories template:
<h1>Categories</h1>
{{partial 'mixin-list'}}
Is it possible to setup conventions, so routes which are using a specific mixin, are given a default controller and template, if they arent added to the project by the user?
After some further research (and some fresh eyes), I found the solution:
import Ember from "ember";
export default Ember.Mixin.create({
renderTemplate: function() {
var currentController = this.container.lookup('controller:' + this.routeName);
if (currentController.isGenerated) {
currentController.reopen(MixinList);
this.render('mixin-list-view');
}
else {
this.render();
}
}
});
That allows me to only define the route, and include the mixin, and let that mixin do the magic:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Route.extend(MixinList, {
model: function() {
return this.store.find('category');
}
});
The important part here, is the renderTemplate method, and the lookup to the currentController. The currentController exposes a property, that tells if it's autogenerated (not explicitly created by the user). In that case, we can overwrite the rendered template, and even add functionallity to the controller - for example by adding a mixin to the controller (.reopen(...)).
I've noticed that if i use the same controller for different routes it does not get reset so i can keep data shared between routes which is really helpful for me.
But i wonder... when does the controller reloads in ember? (runs the init and cleans all of his properties)?
And can i manually tell the controller to reload itself?
Thanks for the help guys :)
The controllers are generally singleton instances (excluding itemController instances), they live the life of the page.
If you need to reset some properties you can do it during setupController of the route in need.
App.FooRoute = Ember.Route.extend({
model: function(){
//return something...
},
setupController: function(controller, model){
this._super(controller, model);
controller.setProperties({foo:'asdf', bar: 'ewaf'});
}
});
or you can define some method on the controller that resets it all, and call it during the setupController. Computed properties are all marked dirty and recalculated automatically when the model behind the controller is swapped out.
App.FooRoute = Ember.Route.extend({
model: function(){
//return something...
},
setupController: function(controller, model){
this._super(controller, model);
controller.reset();
}
});
App.FooController = Ember.ObjectController.extend({
foo: 'asdf',
bar: 'wert',
reset: function(){
this.setProperties({foo:'asdf', bar: 'ewaf'});
}// if you want it to happen on init tack on .on('init') right here
});
on init
App.FooController = Ember.ObjectController.extend({
foo: 'asdf',
bar: 'wert',
reset: function(){
this.setProperties({foo:'asdf', bar: 'ewaf'});
}.on('init')
});