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');
}
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 want to click on a "export" button and transit to a route "home" with "export" query param set as true. I don't want this query param to refresh my route. So here is how my route looks like:
export default Route.extend(ApplicationRouteMixin, {
queryParams: {
export: {
refreshModel: false
}
}
})
In my controller, i'm trying to observe the query param and call a function which does export for me and after that i want to set the query param back to null. here is my controller:
import Ember from 'ember'
const {Controller, inject} = Ember
export default Controller.extend({
// == Dependencies ==========================================================
session: inject.service(),
// == Keyword Properties ====================================================
queryParams: ['export'],
export: null,
queryParamsObserver: function () {
if (this.get('export')) {
this.exportFile()
this.set('export', null)
}
}.observes('export'),
// == Functions =============================================================
exportFile () {
},
// == Actions ===============================================================
actions: {
}
})
But my problem is that when i set the query param to null, it won't change on the url. I'm wondering what i am missing here that is not causing that behavior.
Plus that i wonder if using observing query param is the best solution to trigger some actions.
The problem with your case is related with the fact that your setting of export within controller is too early that query params change is not reflected to url. It is not trivial to learn about Ember.run loops. You should start learning about run loops by reading following.
Take a look at the following twiddle, if you wrap the setting of export within Ember.run.scheduleOnce as in the twiddle then you will see export is cleared in the url. (In fact it is immediately removed; you never see it is becoming true; if you wrap both export function and clearing of export flag within a promise; let's say that will resolved after some seconds; then you will see it will become true then will be removed).
Regarding your question about using observers; I cannot see anything you could do with your current design. The reason is that; you are saying refreshModel is false; hence you do not have any hook methods available in route to trigger export function within controller if you are within the same route already. You need to change your design; what ykaragol suggested could be a good starting point.
First option, using a service and triggering the export via application route or via button component seems more applicable for your situation. You can use it from all of your routes. Users stay at the same route while they are exporting. I would use this option.
Second option is to convert the exportFile to a thennable function. When the exporting is finished, you can clear the queryParams. Here is a working twiddle for you.
I'm very new to EmberJS 2.0 and trying to slowly understand it by building my own website with it. Anyways, I've managed to get Firebase integrated with Ember and my controller is able to authenticate correctly. However, I'd like to understand why when I execute:
this.send('toggleModal');
inside the authenticate action property function (.then()) it doesn't work but if I execute it outside then everything works fine.
1) Is the 'this' keyword getting confused with something other than the Ember controller?
Here is the sample:
// /app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
isShowingModal: false,
actions: {
toggleModal: function() {
this.toggleProperty('isShowingModal');
},
authenticate: function(username, pass) {
this.get('session').open('firebase', {
provider: "password",
email: username,
password: pass
}).then(function (data) {
console.log(data.currentUser);
console.log(session.isAuthenticated); //Why is 'session' not defined?
this.send('toggleModal'); //This doesn't work. Throws an error.
});
this.send('toggleModal'); //This works.
},
logOut: function() {
this.get('session').close();
}
}
});
2) Also, I've noticed that when using Emberfire I'm able to use the property 'session.isAuthenticated' within the template application.hbs however, shouldn't 'session' be an object that is injected to all routes and controllers using Torii? Why is that property inaccessible/undefined within the application.js controller? I'm using https://www.firebase.com/docs/web/libraries/ember/guide.html#section-authentication as a reference.
3) In the guide above the actions for authentication are put inside the route. However, according to this quora post the route should only handle template rendering and model interfacing. Is this post incorrect? The authentication logic should reside in the application.js controller correct? https://www.quora.com/What-is-the-best-way-to-learn-Ember-js
1) Is the 'this' keyword getting confused with something other than the Ember controller?
Yes. This is one of the most common sticking points of Javascript. There's a lot of articles out there about it, but this one looked pretty good. To solve it you'll either need to use an arrow function, bind the function to the current context, or save the context in a local variable. (Read that article first though.)
2) Also, I've noticed that when using Emberfire I'm able to use the property 'session.isAuthenticated' within the template application.hbs however, shouldn't 'session' be an object that is injected to all routes and controllers using Torii? Why is that property inaccessible/undefined within the application.js controller? ...
That's because the template pulls the property from the current context (your controller). Inside of your controller you'll have to use this.get('session') instead. (After you fix the issue I mentioned above.)
3) ... Is this post incorrect? ...
I wouldn't say incorrect, just a bit oversimplified. I would follow whatever conventions the library uses as that's probably the best way given the library's requirements.
You're partially right about this although it's not really confused. this (where you're modal call doesn't work) isn't scoped to the Controller anymore, because it's inside a function. Either:
replace the function (data) call with data => if you're using ember cli. Or
var _self = this; up top and reference _self instead.
This should at least get you started.
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 want to create global object with settings which I need to get from REST API. I need to make one request to REST API and get settings and after that I want to get access to these settings from any controllers and from any templates. What can you advice, what is the best practice for that problem?
Concept
Good practice would be to use initializers. They allow injection of any data to routes, controllers or any other kind of object.
Lets take an example ( example from Ember.js official site )
1 . You have an Application and you have a logger service like this -
App = Ember.Application.extend();
App.Logger = Ember.Object.extend({
log: function(m) {
console.log(m);
}
});
2 . Now you want to have this function log to available on all routes like this -
App.IndexRoute = Ember.Route.extend({
activate: function(){
// The logger property is injected into all routes
this.logger.log('Entered the index route!');
}
});
3. Tell ember to inject an object named Logger to all routes. Use initializer Like this
//I want to inject something
Ember.Application.initializer({
//this dependency name is logger
name: 'logger',
//whenever ember runs
initialize: function(container, application) {
//register my logger object under a name
application.register('logger:main', App.Logger);
//and use this service 'logger' in all 'routes'
application.inject('route', 'logger', 'logger:main');
}
});
With this you can have your application level data / code available in all routes and controller.
Once you get your data in controller you can use it in templates pretty easily.
How to make API call with initializers ??
Initializer can be used to run after some other services has been resolved. Like in our case store. store is the object we need to make API call to server in good way (We can use $.getJSON() or anything else no issues)
Tell the initializers to run after store loaded
//I want to inject something but only after store resolved
Ember.Application.initializer({
//this dependency name is logger
name: 'logger',
//wait for store object to be loaded, we need it to make API call
after : 'store',
//whenever ember runs
initialize: function(container, application) {
//grab the store object from container
var store = container.lookup('store:main');
//now you the store make that API call
self.store.find('user',{current:true}).then(function(data){
//we have the data we can inject it
data = data.get('firstObject');
container.lookup('controller:base').set('user', data);
//user lookup success
console.log("We have found an user. Yeah ember rocks.");
});
}
});
The settings object you are describing should probably live inside ApplicationRoute's model hook. You can then retrieve it in all your other models by saying modelFor('application') (see here). There is also a needs API (see here) that lets you share stuff between controllers in the application.