I want to add a function to the store as part of a web sockets plugins I am working on.
As part of this, I need to extend the store (DS.Store).
I have tried putting the following file in both app/store.js & app/stores/application.js but this does not seem to work.
import DS from 'ember-data';
export default DS.Store.extend({
init: function() {
console.log('Using custom store!');
return this._super.apply(this, arguments);
}
});
Do I need to put this somewhere else?
Turns out that in order to extend the store you need to make a service called store.js.
Related
as the title says, I have some problems understanding how to use an adapter in an ember-engines.
I am currently running my application with ember#2.15, ember-data#2.15 and ember-engines#0.5.14.
I already used an adapter in my main application, but if I tried to reproduce a basic adapter in my application, the page is loading indefinitely.
In my route, I call my adapter with the findAll method:
model()
{
"use strict";
console.log('In my route');
return this.get('store').findAll('my-adapter-name', {reload: true});
}
And in my adapter, I respect the syntax that I used in my in-app adapter:
import DS from 'ember-data';
import Ember from 'ember';
export default DS.Adapter.extend({
findAll: function (store, type, sinceToken, snapshotRecordArray)
{
console.log("In my adapter");
return new Ember.RSVP.Promise(function (resolve, reject)
{
// I accede to my websocket service here, nothing to do with my question
});
},
/* *
* My other function, like findRecord, ect...
*/
});
As you can see, I put some console.log in my code, and I can access the message in my route, which is in my engine, but I can't access the message in my adapter, which is also in my engine.
I tried to put a console.log in an adapter in my application, and the message is properly shown, so I am sure this is because I can't access to the adapter in my engine, so if anybody has an idea to how we should configure our adapter in our ember-engines, this would be very appreciated.
For your information, this is an in-repo engines.
Just found it, this is a bit tricky, but your models (and adapters) should be in the myApp/lib/myEngine/app/models/, and not in myApp/lib/myEngine/addon/models.
I don't know if this is intended this way, but this is the only way I found to add model in your in-repo ember-engines.
EDIT
This will do the trick for the serializers and the transform.
I'm trying to inject an Ember service into an Ember Object but keep getting the following error:
"Assertion Failed: Attempting to lookup an injected property on an
object without a container, ensure that the object was instantiated
via a container."
My code looks essentially something like the following:
const Model = Ember.Object.extend({
store: Ember.inject.service(),
destroyRecord() {...},
serialize() {...},
deserialize() {...},
});
let newModel = Model.create();
newModel.get('store');
Note: it does work if I inject the service into a Controller, but not an object. Haven't had any luck trying to figure out how to register the Object with the Ember container.
It works for an Ember.Controller because Ember controls the lifecycle of the object. In short, when Ember needs an instance of a certain controller, it asks the container for one, and the container will provide the instance, initializing if necessary.
What this implies is that for dependency injection to work, you would need to get a new instance of Model through the container. Assuming Ember 2.3 because of getOwner, and that this is somewhere inside the Ember application:
let owner = Ember.getOwner(this);
let newModel = owner.lookup('object:model');
newmodel.get('store');
You can consult the lookup documentation here.
But how to register? Use an application initializer:
$ ember generate initializer register-model
Then, open up the generated initializer and, assuming that your file is in app/folder/model.js, put something like:
import Model from 'app-name/folder/model';
export function initialize(application) {
application.register('object:model', Model);
}
export default {
name: 'register-model',
initialize
};
You can consult the register documentation here.
Hope this is helpful!
Well you need to passing in the container instance when you create a instance of your model. The container is accessible in the route, controllers, components with this.get('controller'). AFAIK basically anything created with the container gets the container property set. Thats why service injections work in controllers etc..
So if you are creating the model in a route's method. The code will look like below
App.IndexRoute = Ember.Route.extend({
model: function() {
var newModel = Model.create({
container: this.get('container')
});
return newModel.get('test').getText();
}
});
Here is a working demo.
I'm using ember-cli 1.13.8 and I have a service that handles most of my logic. Right now I have a function that listens to whether certain things are true or false and then can make a route change based upon that. I'd rather not have to call that function from inside every route since I want it to happen on every route. Its goal is to determine whether the player won and every interaction in the game drives this.
Inside of my game service:
init() {
...
if(true) {
console.log("you've won!");
this.transitionTo("congratulations");
}
},
Of course, this fails because this isn't a route like Ember expects. I know I can call this method from inside of every route instead but I'm wondering if there is a better way to do this.
Thanks
Edit
So far I've tried importing in the App and then trying to extend the Router. This seems like a bad idea though.
You can use the routing service (which is a private API):
routing: Ember.inject.service('-routing'),
init() {
...
if(true) {
console.log("you've won!");
this.get("routing").transitionTo("congratulations");
}
},
As of Ember 2.15, there is a public router service for exactly this use case. Just add router: Ember.inject.service(), to your Ember class and call this.get('router').transitionTo(...);, easy!
Generally this is a bad idea, but in some cases it's easier than passing through route actions in 100 places (personal experience).
The better way to do this from anywhere is to look the router up on the container:
Ember.getOwner(this).lookup('router:main').transitionTo(...);
this has to be some container allocated Ember object, which includes components, services, and Ember Data models.
Note also that if this will be called a lot, you will want to store the router as a property. You can do this in the init hook:
init() {
this._super(...arguments);
this.set('router', Ember.getOwner(this).lookup('router:main'));
}
...
this.get('router').transitionTo(...);
Ember.getOwner(this) works in Ember 2.3+, prior to that you can use this.get('container') instead.
Ember 1.13:
Create another service called routing:
import Ember from 'ember';
export default Ember.Service.extend({
_router: null,
init() {
this._super();
this.set('_router', this.get('container').lookup('router:main'));
},
transitionTo() {
this.get('_router').transitionTo(...arguments);
}
});
Then you can:
routing: Ember.inject.service(),
goSomewhere() {
this.get('routing').transitionTo('index');
}
I am still very new to the world of Ember, and I'm still trying to understand EmberJS and Ember Data (latest version). In my previous (non-Ember) Node app, I included a library that handled all my REST calls to where my data was stored. It set up the connection to the server and handled all the error handling and parsing into a nice and tidy JSON object, and even handled multiple calls to the server in case the response was too big for one call. I can fetch individual records, but if I wanted to fetch a bunch of records, all I had to do was initialize the library object ('myObj') and call myObj.fetchAll(config) to initiate the fetch. Then I just have to wait on several events.
Example
myObj.on('record', function() { // Each record is an event }
myObj.on('error', function () { ...}
myObj.on('end', function () { // After the last record is retrieved }}
I would very much still like to use this library in Ember, but I have no idea how to go about setting it up. I haven't been able to find any examples of creating my own Adapter (is that the right terminology) that would allow me to do this.
Is this something I can do with Ember, or is it not recommended?
I would strongly suggest you use ember-data before attempting something non-standard as you're learning. Virtually all the documentation, and help will specifically be about ember-data. This is a good starting point: http://guides.emberjs.com/v1.13.0/models/
It's perfectly possible to use your own models and use a custom rest interface. You initiate your myObj.fetchAll(config) call on the router. If it's waiting for an event, return a promise and resolve it when the event returns. I don't know anything about your library but it would look something like:
export default Ember.Route.extend({
model() {
return Ember.RSVP.Promise(function(resolve){
var records = [];
myObj.on("record", (record) => {
records.pushObject(record);
});
myObj.on("end", () => {
resolve(records);
});
myObj.fetchAll(ENV.config);
});
}
});
In imperfect contrast, this is how you glue things together from your adapter to your template normally in ember:
Configuring a REST endpoint:
export default DS.RESTAdapter.extend({
host: 'https://api.example.com'
});
Defining a model:
export default Model.extend({
name: attr('string')
});
Fetching data in your route:
export default Ember.Route.extend({
model() {
return this.store.findAll('person');
}
});
Rendering the data:
{{#each model as |person|}}
{{person.name}}
{{/each}}
It's all pretty straight forward if you stick to the default way of doing things.
I am brand new to Ember, and am having trouble with getting Ember/Ember Data to cache the results of an API call to the Rails backend.
I found this topic: Ember-Data .find() vs .all() - how to control cache?
Which answered a few questions about what find() vs all() does, using that I found a workaround which looks ugly and I am wondering if there is a better, more concise way than this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
if (this.store.all('facility').get('content.length')) {
return this.store.all('facility');
} else {
return this.store.find('facility');
}
}
});
A couple of notes:
You shouldn't cache data inside model hook. Pass cached data with #link-to or similar API.
You shouldn't cache data at all if you don't have a notification system to tell Ember a resource has been changed. Keep in mind that your app may run for a very long time.
You can also do both at same time.
Here is an example to use cached data and update them in background. (Not tested)
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
var currentData = this.store.all('facility');
this.store.find('facility'); // Ember automatically picks new changes
return currentData;
}
});