I tried to inject the store from the initializer without success, so I use lookup on init in my service, but I don't like it too much, I would rather keep things separated and put the injection in the initializer...
Ember : 1.11.1
Ember Data : 1.0.0-beta.16.1
jQuery : 1.11.2
NOT WORKING:Initializer
//app/initializers/initializer-store.js
export default {
name: 'initializer-store',
after: 'store',
initialize: function(container, application) {
application.inject('service:mtg-level-service', 'store', 'store:main');
}
};
WORKING:Service
//app/services/mtg-level-service.js
import Ember from 'ember';
export default Ember.Service.extend({
availableIn: ['controllers', 'routes'],
store: null,
init: function() {
this._super();
this.set('store', this.container.lookup("store:main"));
}
});
As of Ember v1.10:
import Ember from 'ember';
export default Ember.Service.extend({
store: Ember.inject.service('store')
});
Related
currently I'm thinking of the way to load statics into my Ember app.
The problem:
I have app branded logo, app name, app title (browser tab label), texts for routes etc.
What I'm doing now is the following:
model() {
let defaultHeaderModel = {
logo: '/img/logo-cloud.svg',
brand: {
name: 'CloudCenter',
logo: '/img/logo-cloud.svg'
},
userLinks: [{
text: 'Logout',
route: 'logout'
}],
navigation: [{
text: 'Login',
route: 'login'
}]
};
}
As you can see all of the values are hardcoded. What I'd like to do is to somehow load that "statics" and use them through some variables. For ex: header.logo = resources.logo.
My thoughts:
1) Use environment - store all of that values in the config.js and import it where needed. Cons: not sure if that data belongs to environment
2) ES6 POJO which can be imported to the app.
3) .json and some staticsService which will load .json file and through it I will have access to that values.
Are there any standardized approach to do such things? Or maybe better suggestions?
You can create service, and have method(loadData) which will return Promise and will be resolved with your JSON data and update property in service. You need to call loadData in beforeModel hook, after the all the promises resolved only then it will move to model hook.
Refer twiddle basic demonstration
services/my-service.js
import Ember from 'ember';
export default Ember.Service.extend({
defaultHeaderModel:{},
loadData(){
var myServiceDataLoadPromise = Ember.RSVP.Promise.resolve({one:1});
myServiceDataLoadPromise.then(result =>{
this.set('defaultHeaderModel',result);
});
return myServiceDataLoadPromise;
}
});
routes/application.js
inside beforeModel hook, you can load service with data, it can be done any of the route which requires data.
import Ember from 'ember';
export default Ember.Route.extend({
myService: Ember.inject.service(),
beforeModel()
{
return Ember.RSVP.all([this.get('myService').loadData()]);
}
});
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
myService: Ember.inject.service(),
appName: 'Ember Twiddle'
});
templates/application.hbs
{{myService.defaultHeaderModel.one}}
I created the following service and initializer using Ember CLI (generate blueprint):
// services/session.js
import Ember from 'ember';
export default Ember.Object.extend({
loggedIn: false,
...
});
// initializers/session.js
export default {
name: 'session',
initialize: function(container, app) {
app.inject('route', 'session', 'service:session');
app.inject('controller', 'session', 'service:session');
}
};
However, the session is undefined when attempting to access it in a route or controller. Am I missing a step?
// routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel: function() {
var loggedIn = this.session.get('loggedIn'); // undefined
...
}
});
Injected services are lazy loaded, you have to access them via a getter this.get('session') and not directly this.session.
Also, you may want to check out Ember-Simple-Auth if you're doing authentication.
You've got it 99% correct, just seems like a problem with how you're accessing the session.
// routes/application.js
export default Ember.Route.extend({
beforeModel: function() {
var loggedIn = this.get('session.loggedIn');
}
});
I hit the above Error: Attempting to inject an unknown injection: service:titleService with the following code:
// initializers/titleService
export default {
name: 'titleService',
initialize: function(container, application) {
application.inject('route', 'titleService', 'service:titleService');
}
};
// services/titleService.js
import Ember from 'ember';
export default Ember.Service.extend({
title(name) {
this.set('title', name);
}
});
// routes/login.js
import Ember from 'ember';
export default Ember.Route.extend({
titleService: Ember.inject.service(),
actions: {
didTransition: function() {
this.set('titleService.title', 'Login Page');
}
}
});
// templates/application.hbs
<div class="page-header">
<h1>{{titleService.title}}</h1>
</div>
{{outlet}}
am I missing anything?
You have to follow the naming conventions of Ember - If you're referring to your service as titleService, then you want the file to be title-service.js, not titleService.js.
Seems like there is an issue where you are trying to inject route into your TitleService. It's probably a typo that should be router instead of route. If you want to use the router inside your service you could also inject the -routing service, but be careful since it is part of the private API.
Example:
import Ember from 'ember';
export default Ember.Service.extend({
routing: inject.service('-routing'),
someFunc() {
const router = get(this, 'routing').router;
// Do something with the router here
}
});
More information can be found in this thread: http://discuss.emberjs.com/t/routing-as-a-service/8550/3
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 created the following service and initializer using Ember CLI (generate blueprint):
// services/session.js
import Ember from 'ember';
export default Ember.Object.extend({
loggedIn: false,
...
});
// initializers/session.js
export default {
name: 'session',
initialize: function(container, app) {
app.inject('route', 'session', 'service:session');
app.inject('controller', 'session', 'service:session');
}
};
However, the session is undefined when attempting to access it in a route or controller. Am I missing a step?
// routes/application.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel: function() {
var loggedIn = this.session.get('loggedIn'); // undefined
...
}
});
Injected services are lazy loaded, you have to access them via a getter this.get('session') and not directly this.session.
Also, you may want to check out Ember-Simple-Auth if you're doing authentication.
You've got it 99% correct, just seems like a problem with how you're accessing the session.
// routes/application.js
export default Ember.Route.extend({
beforeModel: function() {
var loggedIn = this.get('session.loggedIn');
}
});