I'm trying to setup a PromiseProxy Service that returns an Ember Data model, but the result doesn't seem to set the content property.
My service looks like this:
import Ember from 'ember';
const { computed, inject, ObjectProxy, PromiseProxyMixin } = Ember;
export default ObjectProxy.extend(PromiseProxyMixin, {
isServiceFactory: true,
store: inject.service(),
promise: computed({
get() {
var store = this.get('store');
return store.findRecord('community', window.community.id);
}
})
});
I then inject this service into the following locations:
export function initialize(container, application) {
application.inject('controller', 'community', 'service:community');
application.inject('route', 'community', 'service:community');
application.inject('model', 'community', 'service:community');
application.inject('component', 'community', 'service:community');
}
export default {
name: 'community',
after: 'store',
initialize: initialize
};
And then I use it as a model in my application route as a sort of deferReadiness workaround, since my whole app depends on this one model
which is used throughout and expected to be there.
export default Ember.Route.extend({
model() {
return this.get('community');
}
});
The issue is that it goes on to other routes, and properties on the community object are not there, i.e. content isn't set. Also community.isPending is true. The CP does get hit and the data comes back (I tested with a then in the CP).
Here is a full gist example: https://gist.github.com/knownasilya/8c9f78d910ed50ec8d84
Edit
So I found a workaround:
promise: computed({
get() {
var store = this.get('store');
return store.findRecord('community', window.community.id)
.then(data => {
this.set('content', data);
return data;
})
}
})
Seems like it doesn't set the content because model is proxied already?
Ember Data already wraps its objects in an ObjectProxy, you could just set the object as your service.
Additionally, this syntax is deprecated in future versions syntax for initializers, since it's moved to instance initializers, but no big deal.
initialize: function (container, application) {
// the store will be available from the container,
// and the name of the store changes depending on which version you are using.
var store = container.lookup('service:store'),
community= store.find('community', id);
application.register("service:community", community, { instantiate: false });
application.inject("controller", "community", "service:community");
application.inject("route", "community", "service:community");
application.inject("component", "community", "service:community");
}
And then you can still return community from the model, beforeModel hook etc.
Related
I am struggling to a Service's promised data in a Route. The problem occurs when I am transitioning to the Route at application init; that is, if I load the application, then transition, everything is fine, because the promise is already fulfilled, but if I hit browser reload on that Route, the offending lines won't run. The Service is:
// services/lime-core.js
import Ember from 'ember';
export default Ember.Service.extend({
store: Ember.inject.service(),
resources: null,
init() {
this.set('resources', []);
this.get('store').findAll('resource').then(resources => {
this.set('resources', resources);
});
}
});
This service works perfectly in a template, assuming I have injected the service into the component. I access this service in the route as follows: (assume slug has a meaningful value)
// dashboard/route.js
export default Ember.Route.extend({
limeCore: Ember.service.inject(),
...
model(params) {
...
this.set('resource', this.get('limeCore.resources').findBy('slug', slug));
...
}
}
When the model() hook is called, the limeCore service's init() method is still waiting for the Promise to fulfill. I tried to be clever, but changing the code to something like:
this.get('limeCore.resources').then(resources => {
this.set('resource', resources.findBy('slug', slug))
});
doesn't work, because this.get('limeCore.resources') does not return a Promise. This logic has to be in the route (i.e. can't be moved to a template), because I'm dependent on the slug value to determine an ID which loads a different set of ember-data.
Again, this code works properly once the Promise has been fulfilled — that is, on a future transition to this route, but not on initial application load.
I'm sure there is a correct way to do this... either the Service needs to return a Promise (while still being usable in templates), or I need to make sure that the Promise is fulfilled before the Route.model() method can be executed.
Thanks!
An approach i would use
app/misc/lime_core.js
function getResources(store) {
return store.findAll('resource')
}
export { getResources };
random route
import { getResources } from 'app/misc/lime_core';
export default Ember.Route.extend({
model: function() {
const store = this.get('store');
const sourcePromise = getResources(store);
}
})
But if you're still looking for service approach i would use it like this
export default Ember.Service.extend({
resources: null,
store: Ember.inject.service(),
getResources: function() {
return this.get('store').findAll('source')
}
});
route
limeCore: Ember.inject.service(),
model: function() {
const store = this.get('store');
const sourcePromise = this.get('limeCore').getResources(); // sourcePromise.then(...
}
" My route's model() method result depends on the id of the resource"
model: function() {
this.get('limeCore').getResources().then(sources => {
return Ember.RSVP.hash({
artifact: store.find('artifact', { source: source.get('firstObject.id)})
})
})
}
Or solution 2
model: function() {
return Ember.RSVP.hash({
artifact: this.get('limeCore').getResources().then(sources => {
return store.find('artifact', {source: xx})
})
})
})
}
Also your getResources function can be modified by your criteria
function getResources(store) {
return store.findAll('resource').then(r => r.findBy('id', 1))
}
I think my question was poorly phrased, so I apologize to the reader for that. This happened because if I'm at the point of asking a question, it's often because I'm having trouble expressing the problem.
The approach suggested above didn't work for me, although it gave a few helpful hints. The significant requirement was that (as I mentioned in the comment) I needed to use the resource.id value in the model query. kristjan's approach addressed that, but my question didn't sufficiently show how complicated the model() method was.
An unwritten second requirement was that the ajax request is only made once, because the data rarely changes and is required in a lot of places on application load.
In the end, I was able to use a blend of kristjan's approach — creating a limeCore.getResource() method that loads the data in a Promise, and then require that promise in my route's beforeModel() hook. The key thing I realized was that beforeModel(), like model(), will wait until a Promise resolves before calling the next hook. In my application, model() should never run until these core objects have been loaded (model() is dependent upon them), so it made sense to have them loaded before. Perhaps there is a more elegant approach (which I'm open to hearing), but at this point I feel the issue has been resolved!
// services/lime-core.js
import Ember from 'ember';
export default Ember.Service.extend({
store: Ember.inject.service(),
resources: null,
clients: null,
init() {
this.set('resources', []);
this.set('clients', []);
},
// getCoreObjects() needs to be called at least once before the resources, clients and projects are available in the application. Ideally this method will be called in the route's beforeModel() hook. It cannot be called from the application route's beforeModel() hook because the code will not succeed if the user isn't authenticated.
getCoreObjects() {
if (this.get('resources').length === 0 || this.get('clients').length === 0) {
return Ember.RSVP.hash({
resources: this.get('store').findAll('resource').then(resources => {
this.set('resources', resources);
}),
clients: this.get('store').findAll('client', {include: 'projects'}).then(clients => {
this.set('clients', clients);
})
});
} else {
return Ember.RSVP.hash({});
}
}
});
and in my route:
// routes/dashboard.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
limeCore: Ember.inject.service(),
session: Ember.inject.service(),
...
beforeModel(transition) {
this._super(...arguments);
if (this.get('session.isAuthenticated')) {
return this.get('limeCore').getCoreObjects();
}
},
model(params) {
...
this.set('resource', this.store.peekAll('resource').findBy('slug', slug));
...
return this.store.query('artifact', {'resource-id': this.get('resource.id')});
}
}
I am using Ember 1.13.9 an Ember-data 1.13.11 and struggling to have Ember Data do what I would like. As an example, I have a model called "goal" and a
goals: Ember.on('init', Ember.computed(function() {
const {store} = this.getProperties('store');
return store.findAll('goal');
})),
When this runs it does query the database and put the appropriate records into the store BUT getting them out of the store is my problem. I would have thought that once the Promise resolved that I'd be able to iterate over the array of results. Using the inspector I can see that at clients.goals.content.content (where clients is the name of the server I see this from the inspector:
First of all this is pretty deep into the structure. I was hoping Ember's "get" would allow me to simply say something like data.get('content.0.id') but this just comes back as undefined. Second of all the crazy structure continues in that each of these listed objects are InternalModel objects which only have the following structure to them:
Note that:
there are two InternalModels, that is the right number (matches store results)
the id property is available here
there is an internal property called _data which has the other attributes of the record
Ok so in a completely hacky way I could pull out what I need but surely I shouldn't be writing code like:
_goals: Ember.on('init', function() {
const {store} = this.getProperties('store');
store.findAll('goal').then(data => {
let result = [];
data.forEach(item => {
let record = item.get('data'); // this gets what's in _data apparently
record.id = item.get('id');
result.push(record);
}
this.set('goals', result);
}),
Yuck. What am I missing?
If you need to convert Ember model to plain object you can use Model.serialize or Model.toJSON methods.
Update:
If you need to not just extract the data from models but to access fetched models via computed property, there are several ways to implement it.
1) Synchronous property (collection):
Controller:
import Ember from 'ember'
export default Ember.Controller.extend({
goals: [],
someProperty: Ember.computed('goals.#each', function () {
var goals = this.get('goals');
goals.forEach(goal => {
console.log( goal.get('someProperty') );
});
})
});
Route:
import Ember from 'ember'
export default Ember.Route.extend({
setupController: function (controller, model) {
this._super(controller, model);
this.store.findAll('goal').then(goals => {
controller.set('goals', goals);
});
}
});
Template:
{{#each goals as |goal|}}
{{log goal}}
{{/each}}
2) Asynchronous property (promise):
Controller:
import Ember from 'ember'
export default Ember.Controller.extend({
goals: Ember.computed(function () {
var storeGoals = this.store.peekAll('goal') || [];
if (storeGoals.length) {
return RSVP.resolve(storeGoals);
} else {
return this.store.findAll('goal')
}
}),
someProperty: Ember.computed('goals.#each', function () {
var goals = this.get('goals').then(resolvedGoals => {
resolvedGoals.forEach(goal => {
console.log( goal.get('someProperty') );
});
});
})
});
Template:
{{#each goals as |goal|}}
{{log goal}}
{{/each}}
I've seen other questions about this (like this one), and I believe this should be working
import Ember from 'ember';
import Session from 'simple-auth/session';
export default {
name: 'session-with-me',
before: 'simple-auth',
initialize: function() {
Session.reopen({
me: function() {
if (this.get('isAuthenticated')) {
return this.container.lookup('service:store').find('me', { singleton: true });
}
}.property('isAuthenticated')
});
}
};
the find('me', { singleton: true }) is a working patch of ember-jsonapi-resources. While debugging I can see the request being sent, and the payload comes through. I use the same find call elsewhere in the app, and can confirm a model gets instantiated fine.
On the inspector, under container > simple-auth-session I can see me as a session property, but it shows as { _id: 68, _label: undefined ...}
Has the way to set a session property changed? I may have seen a mention about this somewhere, but I can't find it anymore.
This is in the same domain of another question I asked earlier, but I'm giving up on that approach and trying simply to fetch the user independently of the authentication process.
Set up a custom session like that:
export default Session.extend({
me: function() {
var accessToken = this.get('secure.access_token');
if (!Ember.isEmpty(accessToken)) {
return DS.PromiseObject.create({
promise: this.container.lookup('service:me').find({});
});
}
}.property('secure.access_token')
});
// app/config/environment.js
ENV['simple-auth'] = {
session: 'session:me'
}
DS.PromiseObject is actually part of Ember Data which you're not using - I don't know whether there's an equivalent in the library you chose.
This is most likely an issue with ember-jsonapi-resources, not with Ember Simple Auth.
Instead of reopening the session though you should define your own one that extends the default one that Ember Simple Auth provides - see e.g. this answer: How to store the user in a session
We ended up making it work like this:
// app/sessions/me.js
export default Session.extend({
me: function() {
var accessToken = this.get('secure.access_token');
if (!Ember.isEmpty(accessToken)) {
let self = this;
return this.container.lookup('service:me').find({}).then((me) => {
self.set('me', me);
});
}
}.property('secure.access_token')
});
// app/config/environment.js
ENV['simple-auth'] = {
session: 'session:me'
}
Partly this was due to the way resource services are initialized in EJR (so #marcoow's hunch on this was correct), the other part was just bad coding on my part.
Interestingly we didn't have to explicitly register the session in the container
I am building a site using Ember Simple Auth.
I followed these instructions to try and add the current user object to the session and it worked, using this slightly adapted code:
import Ember from 'ember';
import Session from 'simple-auth/session';
export default {
name: "current-user",
before: "simple-auth",
initialize: function(container) {
Session.reopen({
setCurrentUser: function() {
var accessToken = this.get('secure.token');
var _this = this;
if (!Ember.isEmpty(accessToken)) {
return container.lookup('store:main').find('user', 'me').then(function(user) {
_this.set('content.currentUser', user);
});
}
}.observes('secure.token'),
setAccount: function() {
var _this = this;
return container.lookup('store:main').find('account', this.get('content.currentUser.account.content.id')).then(function(account) {
_this.set('content.account', account);
});
}.observes('content.currentUser'),
});
}
};
However, using the latest version of Ember I'm getting the following:
DEPRECATION: lookup was called on a Registry. The initializer API no longer receives a container, and you should use an instanceInitializer to look up objects from the container. See http://emberjs.com/guides/deprecations#toc_deprecate-access-to-instances-in-initializers for more details.
I know that I need to split the above into /app/initializers and /app/instance-initializers (as per the notes here) but I'm not quite sure how to go about it.
Of course, if there is an easier/cleaner way to make the user and account objects available to every route/template I'd love to hear them :)
Thanks
This works for me on:
ember-cli: 0.2.7 (ember: 1.12.0, ember-data: 1.0.0-beta.18)
ember-cli-simple-auth: 0.8.0-beta.3
Note:
ember-data: 1.13. Store is registered in an initializer, should work as is
ember-data: 1.0.0-beta.19. Store is registered in an instance-initializer, some adjustments needed
1) Customize session
//config/environment.js
ENV['simple-auth'] = {
session: 'session:custom',
...
}
//app/sessions/custom.js
import Session from 'simple-auth/session';
export default Session.extend({
// here _store is ember-data store injected by initializer
// why "_store"? because "store" is already used by simple-auth as localStorage
// why initializer? I tried
// _store: Ember.inject.service('store') and got error
currentUser: function() {
var userId = this.get('secure.userId');
if (userId && this.get('isAuthenticated')) {
return this._store.find('user', userId);
}
}.property('secure.userId', 'isAuthenticated')
});
2) Inject store to session by initializer (otherwise find() wouldn't work)
//app/initializers/session-store
export function initialize(container, application) {
application.inject('session:custom', '_store', 'store:main')
// "store:main" is highly dynamic depepeding on ember-data version
// in 1.0.0-beta.19 (June 5, 2015) => "store:application"
// in 1.13 (June 16, 2015) => "service:store"
}
export default {
name: 'session-store',
after: 'ember-data',
initialize: initialize
}
3) In template
{{#if session.isAuthenticated}}
{{session.currentUser.name}}
{{/if}}
Note: this does not relieve you from deprecations generated by ember-simple-auth itself.
First of all you shouldn't reopen the session but use a custom session instead (see this example: https://github.com/simplabs/ember-simple-auth/blob/master/examples/4-authenticated-account.html#L132). Also you you shouldn't only load the current user when the access token is set but when the session is authenticated ('session.get('isAuthenticated')') which makes your code not dependent on the authenticator.
The deprecation warnings regarding the use of the registry in the initializer will go away in ESA 0.9.0 hopefully.
Here's a before and after of an initializer/instance-initializer that I did the other day.
Before
export function initialize( container, application ) {
var session = Ember.Object.create({
user:null,
authorization:null
});
application.register('session:main', session, { instantiate: false });
application.inject('route', 'session', 'session:main');
application.inject('controller', 'session', 'session:main');
application.inject('adapter', 'session', 'session:main');
}
After
export function initialize( instance) {
var session = Ember.Object.create({
user:null,
authorization:null
});
instance.registry.register('session:main', session, { instantiate: false });
instance.registry.injection('route', 'session', 'session:main');
instance.registry.injection('controller', 'session', 'session:main');
instance.registry.injection('adapter', 'session', 'session:main');
}
Ember Data Stuff
Ember Data in the latest iterations should be fetched using store:application
export function initialize(instance) {
var store = instance.container.lookup('store:application');
....
}
export default {
name: 'socket',
initialize: initialize,
after:['ember-data']
};
i have a component and when user click on component it add some value to store,i try to use this way but i get an error :
OlapApp.MeasureListItemComponent = Ember.Component.extend({
tagName: 'li',
isDisabled: false,
attributeBindings: ['isDisabled:disabled'],
classBindings: ['isDisabled:MeasureListItemDisabled'],
actions: {
add: function(measure) {
var store = this.get('store');
store.push('OlapApp.AxisModel', {
uniqueName: measure.uniqueName,
name: measure.name,
hierarchyUniqueName: measure.hierarchyUniqueName,
type: 'row',
isMeasure: true,
orderId: 1
});
}
}
});
and this is error:
Uncaught TypeError: Cannot call method 'push' of undefined MeasureListItemComponent.js:18
is it posible to push record to store from component? why i cant access to store ?
my model name is 'AxisModel' and application namespace is 'OlapApp'
Since Ember v1.10, the store can be injected to components using initializers, see: http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_injected-properties:
export default Ember.Component.extend({
store: Ember.inject.service()
});
In a component the store does not get injected automatically like in route's or controller's when your app starts. This is because components are thought to be more isolated.
What follows below is not considered a best practice. A component should use data passed into it and not know about it's environment. The best way to handle this case would be using sendAction to bubble up what you want to do, and handle the action with the store in the controller itself.
#sly7_7 suggestion is a good one, and if you have a lot of components from where you need access to the store then it might be a good way to do it.
Another approach to get to your store could be to get the store your component surrounding controller has reference to. In this case it doesn't matter which controller this is because every controller has already a reference to the store injected into it. So now to get to your store could be done by getting the component's targetObject which will be the controller surrounding the component and then get the store.
Example:
OlapApp.MeasureListItemComponent = Ember.Component.extend({
...
actions: {
add: function(measure) {
var store = this.get('targetObject.store');
...
}
}
});
See here for a working example.
Hope it helps.
Update in response to your comment having nested components
If for example you child component is only nested one level then you could still refer to parent's targetObject using parentView:
App.ChildCompComponent = Ember.Component.extend({
storeName: '',
didInsertElement: function() {
console.log(this.get('parentView.targetObject.store'));
this.set('storeName', this.get('parentView.targetObject.store'));
}
});
Updated example.
Since Ember 2.1.0
export default Ember.Component.extend({
store: Ember.inject.service('store'),
});
before Ember 2.1.0 - dependency injection way
App.MyComponent = Ember.Component.extend({
store: Ember.computed(function() {
return this.get('container').lookup('store:main');
})
});
before Ember 2.1.0 - controller way
You can pass store as property from controller:
App.MyComponent = Ember.Component.extend({
value: null,
store: null,
tagName: "input",
didInsertElement: function () {
if (!this.get('store')) {
throw 'MyComponent requires store for autocomplete feature. Inject as store=store'
}
}
});
Store is available on each controller. So in parent view you can include component as follows:
{{view App.MyComponent
store=store
class="some-class"
elementId="some-id"
valueBinding="someValue"
}}
Passing properties to component is documented here
The current ember-cli way to do this appears to be with an initializer. Very similar to the #Sly7_7 answer.
To get a basic model use:
ember g initializer component-store-injector
Then edit this to:
// app/initializers/component-store-injector.js
export function initialize(container, application) {
application.inject('component', 'store', 'store:main');
}
export default {
name: 'component-store-injector',
initialize: initialize
};
I believe this will add the store to all components.
Stolen from https://github.com/ember-cli/ember-cli-todos
I don't know if components are intended to be used such a way. But if you want, I think you can declare an initializer and inject the store into all components.
Ember.onLoad('OlaApp', function(OlaApp) {
OlapApp.initializer({
name: 'injectStoreIntoComponents',
before: 'registerComponents',
initialize: function(container, application){
container.register('store:main', App.Store);
container.injection('component', 'store', 'store:main');
}
})
});
Here is a contrived but working example: http://jsbin.com/AlIyUDo/6/edit
The store can be injected with help of dependency injection.
Example
import Ember from 'ember';
export default Ember.Component.extend({
/**
*
*/
store: Ember.inject.service(),
/**
* Initialize the component.
*/
init() {
this.initialize();
this._super();
},
/**
* Initialize the properties and prerequisites.
*/
initialize() {
// Set the component properties
this.todos().then((data) => {
this.set('todoEntries', data);
});
},
/**
* Returns the todo entries.
*
* #returns {*|Promise|Promise.<T>}
*/
todos() {
const store = this.get('store');
return store.findAll('todo');
},
});
Another way which no one has yet mentioned is to simply pass controller.store to the component e.g.
{{my-awesome-component store=controller.store}}