After migrating from global-namespace-version to ember-cli (0.1.4), my code doesn't work as before. I'm watching the content property in my controller to handle the data, fetched in my route. But nothing happens, the groupedResults function isn't called.
The data is fetched successfully (Ember Inspector shows all projects), so the content property shouldn't be empty.
Router
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
controllerName: 'organization-projects',
model: function() {
return this.store.find('project');
},
renderTemplate: function() {
// render all projects
this.render('organization/projects-list', {
into: 'application'
});
// render toolbar
this.render('organization/toolbar', {
into: 'application',
outlet: 'toolbar'
});
}
});
Controller
import Ember from 'ember';
export default Ember.Controller.extend({
groupedResults: function () {
console.log(this.get('content'));
}.property('content.[]')
});
Are there some breaking changes that I've missed?
Got it: changed controllerName: 'organization-projects' to controllerName: 'organization.projects'.
But I wonder why this worked in my old global-namespace-version.
Related
When I refresh the index page of my ember app, it appears that I can't call the functions inside my index.js file located in app/routes.
I don't really know how I can solve this issue.
The source code of index.js:
import Ember from 'ember';
import ProjectRoute from 'web/project-route';
export default ProjectRoute.extend({
authSrv: Ember.inject.service('authentication'),
_title: 'index.title',
_requireAuth: true,
beforeModel()
{
"use strict";
this._super();
},
model()
{
"use strict";
console.log(this.get('authSrv').username);
return {user_id: this.get('authSrv').user_id,
username: this.get('authSrv').username};
}
});
In the code source above we can see that I try to display the username. When I first log onto this page, it display well, but when I refresh the page, it doesn't display anything.
Any thought about it is welcomed!
So I fixed it with the Ember module RSVP. Basically, the main problem was coming from a promise. I didn't waited to catch the promise.
The index.js look like this know.
import Ember from 'ember';
import ProjectRoute from 'web/project-route';
export default ProjectRoute.extend({
authSrv: Ember.inject.service('authentication'),
_title: 'index.title',
_requireAuth: true,
beforeModel()
{
"use strict";
this._super();
},
model()
{
"use strict";
let promise = new Ember.RSVP.Promise((resolve, reject) =>
{
this.get('authSrv').get('current_auth').promise.then((res) =>
{
resolve({user_id: this.get('authSrv').user_id,
username: this.get('authSrv').username});
});
});
return promise;
}
});
I'm new at ember and as first app I'm trying to build a little online shop.
I can receive "all products" as product overview but not one specific product by id.
I have following in the router.js:
Router.map(function() {
this.route('products');
this.route('product', {path: 'products/:product_id'});
});
My products.js (which works):
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return this.get('store').query('product', {});
}
});
And the product.js (which does generate the problem):
import Ember from 'ember';
export default Ember.Route.extend({
model(params){
return this.store.findRecord('product', params.product_id);
}
});
The project is available under https://github.com/hatchling-shop/hatchling/tree/master/EmberHatchling
After running the code seems that you have an issue in the API in Product.findById() and not in Ember.
In the following method:
Product.findById(id, function(id, err, product) {
if (err) {
res.send(err);
}
res.json({product: product});
});
the params in the callback are wrong, instead you need to remove id and change to:
Product.findById(id, function(err, product) {
if (err) {
res.send(err);
}
res.json({product: product});
});
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
});
}
});
ember-cli 0.2.7
ember 1.13-beta2
Im trying to setup a component to handle overlays in my webapp. I want to be able to open this overlay from across the application but I'm having trouble figuring out how to do so. Here is what I got.
It seems like ember doesn't recognise the service though. Any help greatly appreciated!
The service
import Ember from 'ember';
export default Ember.Service.extend(Ember.Evented, {
publish: function() {
return this.trigger.apply(this, arguments);
},
subscribe: function() {
this.on.apply(this, arguments);
},
unsubscribe: function() {
this.off.apply(this, arguments);
}
});
The navigation component
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'nav',
classNames: ['l-navigation'],
events: Ember.inject.service('event-bus'),
actions: {
openDashboard: function() {
this.get('events').publish('dashboard:open');
}
}
});
And then the 'overlay' component
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'section',
classNames: ['l-dashboard'],
events: Ember.inject.service('event-bus'),
init: function() {
this.get('events').subscribe('dashboard:open', this, 'openDashboard');
},
openDashboard: function() {
alert('opening dashboard');
}
});
EDIT - By popular demand :-)
Here is the jsbin for the issue. http://emberjs.jsbin.com/cesotamuza/1/
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(...)).