I'm trying to get a param from the URL, but it appears it doesn't get assigned at all. I was following this guide http://emberjs.com/guides/routing/query-params/
Below is the index.js controller.
export default Ember.Controller.extend({
queryParams: ['authToken'],
authToken: null,
init: function() {
var authToken = this.authToken;
console.log(authToken);
}
});
When accessing the root URL / or /#, authToken is null, which works as expected. However, when trying out /#?authToken=123, it's still null. Any ideas ?
Well, I couldn't get value of authToken inside init hook - I think it's called too early, but you can wrap this in Ember.run.next method or get its value in setupController hook in IndexRoute. This works as expected:
App.IndexRoute = Ember.Route.extend({
setupController: function (controller, model) {
console.log(controller.get('authToken'));
}
});
App.IndexController = Ember.Controller.extend ({
queryParams: ['authToken'],
authToken: null,
init: function() {
this._super();
Ember.run.next(this, function() {
console.log(this.get('authToken'));
});
}
});
For example, URL site.com#/?authToken=lol produces following console output:
app:49 lol
app:59 lol
Working demo.
Related
I'm using Ember 1.9.1 and having an issue when transitioning to a route with query params.
The queryParams don't appear in the url.
I got http://localhost:8080/login instead of having http://localhost:8080/login?email=myemail&uuid=myuuid
App.MyRouteRoute = Ember.route.extend({
redirect: function (model, transition) {
this.transitionTo('login', {
queryParams: {
uuid: model.get('uuid'),
email: model.get('email')
}
});
}
You need to specify queryParams and uuid, email in LoginController:
App.LoginController = Ember.Controller.extend({
queryParams: ['uuid', 'email'],
uuid: null,
email: null
});
Working demo.
http://emberjs.jsbin.com/zacagazuwi/1#/login?email=test%40gmail.com&uuid=myuuid
so in the users/confirmation route, I am able to access that confirmation_token in the setupController hook
export default Ember.Route.extend(PresentsModalsMixin, {
setupController: function(controller, model){
this._super(controller,model);
controller.get('confirmation_token'); // token I want in query params is available here.
}
});
but in the view the confirmation token is no longer at this.get('controller.confirmation_token'')
export default Ember.View.extend({
templateName: 'users/confirmation',
actions: {
submit: function() {
this.get('controller.confirmation_token'); // null
this.get('controller').send('submit');
}
}
}
});
in the controller where the action goes, it is also no longer available
export default Ember.Controller.extend({
queryParams: ["confirmation_token"],
confirmation_token: null,
actions: {
submit: function() {
this.get('confirmation_token'); // null value
}
}
});
why is the query param getting blown away? and is there a way I can get it back
the template that is calling the view looks like this
{{render 'users/confirmation' currentUser}}
the correct answer is
{{render 'users/confirmation'}}
removing currentUser as the second argument and not passing any argument fixes this issue and allows you to keep the query params, it gets overwritten when you pass a second argument like this
{{render 'users/confirmation' currentUser}}
I read at
http://emberjs.com/guides/controllers/
the following code:
I have a search box and want to send the value of the search box to the SearchController.
App.ApplicationController = Ember.Controller.extend({ // the initial
value of the `search` property search: '',
actions: {
query: function() {
// the current value of the text field
var query = this.get('search');
this.transitionToRoute('search', { query: query });
} } });
How can i get the query parameter in the SearchController and then show it in search.hbs?
I am working with ember- cli.
The router is
import Ember from 'ember';
var Router = Ember.Router.extend({
location: NENV.locationType
});
Router.map(function() {
this.route('search');
});
export default Router;
I set up a route under routes/search.js
export default Ember.Route.extend({
model : function (params) {
console.debug("hi");
return params;
},
setupController: function(controller,model) {
var query = model.query;
console.debug("query is");
console.debug(query);
}
});
When debugging i get an error:
ember More context objects were passed than there are dynamic segments
Thanks,
David
You need to define your search route to be dynamic, so if you change your route definition to something like this
Router.map(function() {
this.resource('search', {path: '/search/:query});
})
This should work as you are expecting. Let me know if anything.
Cheers!
Ember seems to be removing the query string from the URL.
I've stepped through the code, and I know for sure that I'm setting the flag correctly:
<script>
ENV = {FEATURES: {'query-params-new': true}};
</script>
<script src="js/libs/ember.prod-1.6.0beta+canary.js"></script>
But when my route loads, the query string is being removed, and I can't access the queryParams.
Here's my router:
App.Router.map(function () {
this.resource('simpleSearch', {path: 'simplesearch'}, function () {
this.resource('simpleSearchOption', {path: ':simpleSearchOption_id'});
this.resource('simpleSearchResults', {path: 'results'});
});
});
When I attempt the following url (which is based on the URL from the guide), the query string is stripped: [webserver]/#/simplesearch/0?simplesearch[height]=10
When the model is first initialized by the route, it builds out what the query parameters will be, and the controller's queryParams property is set by the route:
App.SimpleSearchRoute = Ember.Route.extend({
model: function () {
var optionsForSimpleSearchModel = [];
for (var i = 0; i < App.SimpleSearchOptions.length; i++) {
optionsForSimpleSearchModel[i] = App.SimpleSearchOption.create(App.SimpleSearchOptions[i]);
}
return App.SimpleSearch.create({
'simpleSearchOptions': optionsForSimpleSearchModel,
'numOfOptions': App.SimpleSearchOptions.length
});
},
setupController: function (controller, model) {
console.log(model.get('queryParams'));
controller.set('queryParams', model.get('queryParams'));
controller.set('model', model);
}
});
BUT, I've also tried explicitly setting the queryParams in the controller:
App.SimpleSearchController = Ember.ObjectController.extend({
height: null,
queryParams: ['height'],
...
I'm not sure what else I'm missing...
How does this thing really work?
It seems that I'm a silly dude.
I needed to add the params argument to the model() function:
model: function (params) {
console.log(params);
//{height: null} when queryParams['height'] is explicitly set in the controller
Is there any way that I can dynamically generate the queryParams for the controller before Ember decides there are none, if I don't set them explicitly?
Also, my URL was incorrect, (as is the one in the Ember guide). It should have been:
[webserver]/#/simplesearch/0?height=10
instead of
[webserver]/#/simplesearch/0?simplesearch[height]=10
In your model hook you need to pass in the params.
App.SimpleSearchRoute = Ember.Route.extend({
model: function (params) {
return this.store.findQuery('simpleSearch', params);
}
});
Here is another question along the same lines.
Cheers
I'm porting an existing app to the new router api and can't find an example where someone reaches into the router and grabs the apps store to query for data.
Here is my old router
CodeCamp.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('sessions', router.get('store').findAll(CodeCamp.Session));
}
})
})
});
Here is the start to my new router but the "router.get('store')" doesn't like the word router and the keyword "this" also returns undefined.
CodeCamp.Router.map(function(match) {
match("/").to("sessions");
});
CodeCamp.SessionsRoute = Ember.Route.extend({
renderTemplates: function() {
this.render('sessions');
},
setupControllers: function() {
this.set('controller.content', this.get('store').findAll(CodeCamp.Session));
}
});
Update
I can get it to work with the following (it just seems ugly and I'd prefer another way)
setupControllers: function() {
this.set('controller.content', CodeCamp.Session.all().get('store').findAll(CodeCamp.Session));
}
Just use CodeCamp.Session.find() ;)