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
Related
In my app I have a searchformula with dynamic input fields. The form leads then to the following URL:
/trefferliste/?modulId=1&modus=dokument&identnummer=XXX
my route definition:
this.resource('trefferliste', { 'path' : 'trefferliste/:query' });
until this point it works, but when i refresh the page it says: UnrecognizedURLError
in the trefferliste route I load the data with following statement:
return this.store.find('trefferliste', params.query);
I figured out, that the "?" causes the problem, but I need it for my store find query. So, can someone tell me how to define my route?
UPDATE: Here is a jsbin: http://emberjs.jsbin.com/nesehuxugi
Steps to reproduce the error:
Push the Button > then refresh the page and look into the console!
some additional informations:
DEBUG: Ember : 1.12.1
ember-template-compiler.js:163 DEBUG: Ember Data : 1.0.0-beta.17
ember-template-compiler.js:163 DEBUG: jQuery : 1.11.2
Use query params instead of dynamic segments, so characters with special meaning to URL schema will be escaped and your application routing will work even on refresh.
URL becomes: http://app.com#/trefferliste?query=%3FmodulId%3D1%26modus%3Ddokument%26identnummer%3DXXX, but you have to respect Ember.js and global URL conventions.
Working demo.
Code:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('trefferliste');
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
App.TrefferlisteController = Ember.Controller.extend({
queryParams: ['query'],
query: null
});
App.IndexController = Ember.ObjectController.extend({
actions: {
suche: function() {
var query = "?modulId=1&modus=dokument&identnummer=XXX";
this.transitionTo('trefferliste', { queryParams: { query: query } });
}
}
});
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.
I would like to access a global query param in a nested route (child route).
The localisation setting is stored in a Global Query Param on the Application Route:
App.ApplicationController = Ember.Controller.extend({
queryParams: ['localSelected']
});
Now I would like to access that value in my App.IndexRoute
App.TranslateRoute = Ember.Route.extend({
model: function(params){
params.localSelected **NOT AVAILABLE**
}
});
Finally found a solution by setting a global variable every time the query params updates.
In the Application Controller
App.ApplicationController = Ember.Controller.extend({
queryParams: ['localSelected'],
localSelectedOberver: function(){
App.set('localSelected', this.get('localSelected'));
}.observes('localSelected').on('init'),
localSelected: "en"
});
And because the controller initializes to late, you also need:
App.ApplicationRoute = Ember.Route.extend({
model: function(params){
App.set('localSelected', params.localSelected)
}
)}
})
Then whenever you need to know the localisation query param value you can just go:
App.get('localSelected');
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!
I'm trying to start to build a admin system that will run on a /admin/ prefix.
Here is my routes file
App.Router.reopen
location: 'history'
rootURL: '/admin'
App.IndexRoute = Ember.Route.extend
setupController: (controller, model) ->
#controllerFor('application').set('currentRoute', 'home')
When I go to /admin I get the following error:
Uncaught Error: No route matched the URL '/admin'
I'm just starting with emberjs, and my code is based on this serie
Ember version: v1.0.0-pre.4
Ember-data current api revision:: 11
In old-router the 'rootURL' property would have been ignored when resolving routes. In the latest version of ember, rootURL only seems to be used when constructing links. Not sure if this is a bug or oversight. As a workaround, try this instead:
App.Router.map(function() {
this.resource("admin", { path: "/admin" }, function() {
this.route("other");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('admin');
}
});
When talking about routing in emberjs, it depends which version you are using. There was a big API change between 1.0pre2 and 1.0pre3. The docu on www.emberjs.com is already up-to-date for the new API and and easy to understand.
Below a really small example that shows
IndexRoute that automatically redirects to the overview of all members at '/members'.
Dynamic routing based on an ID
Serialization/Deserialization in case that the parameter is not 'id' but something else. In the example below, it is 'refId' (stands for reference ID).
Well, the examle does not really show more than the official documentation. but add-on information is always nice.
So, hope this helps. cheers.
App.Router.map(function() {
this.resource("members", { path: '/members' });
this.resource("member", { path: "/members/:refId" }, function() {
this.route("delete");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('members');
}
});
App.MembersRoute = Ember.Route.extend({
model: function() {
return App.Member.findAll();
}
});
App.MemberRoute = Ember.Route.extend({
model: function(params) {
return App.Member.find(params.refId);
},
// overwrite default serializer (defaults to 'id', member has 'refId')
serialize: function(model) {
return { refId: model.refId };
}
});