this.route('browse', { path: '/points' }, function() {
this.route('quiz', { path: '/quiz' });
this.route('learn', { path: '/learn' });
});
this.route('post', { path: '/post' }, function() {
this.route('star', { path: '/star' });
this.route('marked', { path: '/marked' });
});
The reason I want to do this is that I would like to share same base template between nested routes and I do not put all these into application template (otherwise I need to place so many condition block in it).
What I want to achive is
browse -> /points
browse.quiz -> /quiz
browse.learn -> /learn
post -> /posts
post.star -> /star
post.marked -> /marked
Try resetNamespace
this.route('browse', { path: '/points' }, function() {
this.route('quiz', { resetNamespace: true });
this.route('learn', { resetNamespace: true });
});
Related
Hi I am getting an error of UnrecognizedUrl when I am trying to access my route on my browser to dashboard/posts/id/comments. Below is my router.js I would like to ask if my router is wrong or can someone please tell me the right approach
this.route('dashboard', function() {
this.route('posts', function() {
this.route('show', { path: ':post_id' }, function() {
this.route('comments', { path: ':post_id/comments'}, function() { });
});
});
});
However if I put the {{outlet}} on my resource file app/pods/dashboard/posts/show/template.hbs it does show the content I put on my app/pods/dashboard/posts/show/comments/template.hbs when I changed my router.js to
this.route('dashboard', function() {
this.route('posts', function() {
this.route('show', { path: ':post_id' }, function() {
this.route('comments');
});
});
});
My goal is I want to show the content of app/pods/dashboard/posts/show/comments/template.hbs on a different page which in the browser url should be dashboard/posts/id/comments
It should be like
this.route('dashboard', function() {
this.route('routeA', function() {
this.route('childRouteA', { path: '/:childRouteA_id' }, function() {
this.route('childRouteAb');
});
});
});
Ex: dashboard/routeA/id/childRouteAb
If childRouteAb is a dynamic id then, it should be like
this.route('dashboard', function() {
this.route('routeA', function() {
this.route('childRouteA', { path: '/:childRouteA_id' }, function() {
this.route('childRouteAb', { path: '/:childRouteAb'});
});
});
});
Ex: dashboard/routeA/id/id2
If you need the url to specify the type of id before the id, you can do like this.
this.route('dashboard', function() {
this.route('routeA', function() {
this.route('childRouteA', { path: '/childRouteA/:childRouteA_id' }, function() {
this.route('childRouteB', { path: '/childRouteB/:childRouteB_id'});
});
});
});
Ex: dashboard/routeA/childRouteA/id1/childRouteB/id2
Here are my routes definition:
Router.map(function() {
this.resource('servers', { path: '/' }, function() {
this.resource('server', { path: '/servers/:serverid'}, function () {
this.resource('databases', { path: '/databases' }, function () {
this.resource('database', { path: '/:databaseid'}, function () {
this.resource('catalogues', { path: '/catalogues' });
this.resource('eventtriggers', { path: '/eventtriggers' });
this.resource('extensions', { path: '/extensions' });
this.resource('schemas', { path: '/schemas' }, function () {
this.resource('schema', { path: '/:schemaid' }, function () {
this.resource('tables', { path: '/tables' }, function () {
this.route('new-table', function () {});
this.resource('table', { path: '/:tableid' });
});
});
});
this.resource('replication', { path: '/replication' });
});
});
});
});
});
And the code used to generate link to new-table route goes as follows:
{{#link-to 'new-table' schema.database.server.id schema.database.id schema.id}}
And this gives me the error mentioned in this question's topic. However when I replace this.route call to this.resource everything works fine. So what am I doing wrong here? I'm using ember 1.13.2.
A resource defines the main entry point of a link-to. So if you create a resource new-table you can access it via new-table in the link-to helper. Routes on the other hand are children of a resource or another route, they should be prefixed with their parent route or resource. So in the example you gave, you can link to the new-table route by using tables.new-table.
I've recently started using Ember.js with Ember-CLI and I'm pretty excited.
But there are some things that are not clear for me.
Here is my router:
this.resource("authenticated", { path: '/' }, function() {
this.resource("contacts", function() {
this.resource("contact", { path: ':id' });
});
this.resource("chats", function() {
this.resource("chat", { path: ':id' });
});
this.resource("settings", function() {
this.resource("setting", { path: ':id' });
});
});
The question is - why after 2nd nesting 'resolver' starts finding objects outside of 'authenticated' resource?
For example
my-app/pods/chats/index/view
But expected
my-app/pods/authenticated/chats/index/view
Why is 'authenticated' missed ?
Your authenticated route is not applied in the url because you assigned it's url to the root: { path: '/'}.
You should either change the path to 'authenticated' or remove it all together:
this.resource("authenticated", function() {
...
});
Now, however, authenticated is only rendered when a user navigates to my-app/pods/authenticated. If you still want to render authenticated as index, you should prefix your nested resources:
this.resource("authenticated", { path: '/' }, function() {
this.resource("contacts", { path: '/authenticated/contacts' }, function() {
...
});
this.resource("chats", , { path: '/authenticated/chats' }, function() {
...
});
...
});
I hope this helped you.
I have an existing Ember app which works great. I need to add a new subroute to the app to allow users to view additional information. My current route looks like this:
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'});
});
});
with the following URL
#/accounts/56/
The route I'd like to add is this:
#/accounts/56/interactions
So I added a nested route like so:
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: '/interactions'});
});
});
});
But when that route is accessed I get the following error:
Uncaught Error: assertion failed: The route interactions was not found core.libs.js:2236
Uncaught Error: You cannot modify child views while in the inBuffer state core.libs.js:19298
So I also added an empty InteractionsRoute but that didn't resolve it:
Social.InteractionsRoute = Ember.Route.extend();
Does anyone have input on what might be going wrong?
In addition I'm trying to add a button to the interface which looks like this:
{{#linkTo "interactions"}}# Interactions{{/linkTo}}
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: '/interactions'});
});
});
});
Like this the URL to interactions is #/interactions
But you wanted this: #/accounts/56/interactions
Therefore you need to remove the preceding slash in the path hook of interactions, otherwise you'll indicate that this route will be accessed from the root.
Social.Router.map(function() {
this.resource('accounts', { path: '/accounts' }, function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions', { path: 'interactions'});
});
});
});
By the way, if you don't declare a path hook the url will be the same as the route name. So you can also use this:
Social.Router.map(function() {
this.resource('accounts', function(){
this.resource('account', { path: ':account_id'}, function(){
this.route('interactions');
});
});
});
Try splitting out your list from the individual record view.
Social.Router.map(function() {
this.resource('accounts');
this.resource('account', { path: '/accounts/:account_id' }, function() {
this.route('interactions');
});
});
Your route name for interactions should be like this:
Social.AccountInteractionsRoute = Ember.Route.extend();
From the table on http://emberjs.com/guides/routing/defining-your-routes/
If all else fails you could just avoid the nested resources and define the paths for each route.
Social.Router.map(function() {
this.resource('accounts');
this.resource('account', { path: '/accounts/:account_id' });
this.resource('account-interactions', { path: '/accounts/:account_id/interactions' });
});
In router V1 you can make a simple goBack functionality like this:
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'posts'
}),
posts: Ember.Route.extend({
route: '/posts',
showPost: Ember.Route.transitionTo('post'),
connectOutlets: function(router){
router.get('applicationController').
connectOutlet('posts',App.Post.find());
}
}),
post: Ember.Route.extend({
route: '/posts/:post_id',
goBack: Ember.Route.transitionTo('posts'),
connectOutlets: function(router, post) {
router.get('applicationController').connectOutlet('post', post);
}
})
})
});
I'm trying to do the same thing in router v2 and came up with the following solution:
App.ApplicationController = Ember.Controller.extend({
currentPathDidChange: function () {
this.set('_previousPath', this.get('_currentPath'));
this.set('_currentPath', this.get('currentPath'));
}.observes('currentPath')
});
App.GobackRoute = Ember.Route.extend({
redirect: function (model) {
var previousPath = this.controllerFor('application').get('_previousPath');
var parts = previousPath.split(".");
var router = this.get('router');
if (router.hasRoute(parts[parts.length - 1])) {
this.transitionTo(parts[parts.length - 1]);
} else if (router.hasRoute(parts[parts.length - 2] + "." + parts[parts.length - 1])) {
this.transitionTo(parts[parts.length - 2] + "." + parts[parts.length - 1]);
} else {
Ember.Logger.warn('No route for: %s', previousPath);
}
}
});
Isn't there a much simpler solution to this?
jsFiddle
I would like to reuse the routes, controllers, etc... without resulting in some sort of spaghetti routing like
App.AnimalsRoute = Ember.Route.extend({
events: {
goBackToThis: function() {
this.transitionTo('this');
},
goBackToThat: function() {
this.transitionTo('that');
},
goBackToSomeThingElse: function() {
this.transitionTo('someThingElse');
}
}
});
I would like to have 1 goback functionality for the whole router!
My initial solution result in something like the following: (look for all the goBack routes, and the reuse of the ebed routes)
App.Router.map(function (match) {
this.route('home', { path: '/' });
this.route('logout');
this.route('login');
this.resource('goBack', { path: '/goback' });
this.resource('ccpr', function () {
this.resource('goBack', { path: '/goback' });
this.resource('ccprPatients', { path: '/' }, function () {
this.route('search');
});
this.resource('ccprPatient', { path: '/:ccpr_patient_id' }, function () {
this.resource('goBack', { path: '/goback' });
this.resource('ccprPracticeSessions', { path: '/practicesessions' }, function () {
});
this.resource('ccprPracticeSession', { path: '/practicesessions/:ccpr_practicesession_id' }, function () {
this.route('info');
this.route('anamnese');
this.route('medication');
this.route('trainingModel', { path: '/trainingmodel' });
this.route('socialEvaluation', { path: '/socialevaluation' });
this.route('medicalFollowUp', { path: '/medicalfollowup' });
this.route('psychologicalEvaluation', { path: '/psychologicalevaluation' });
this.route('nutritionalAdvice', { path: '/nutritionaladvice' });
this.resource('goBack', { path: '/goback' });
this.resource('ebedMedication', { path: '/ebedmedication/:ebed_medication_id' }, function () {
});
this.resource('ebedLabResult', { path: '/ebedlabresult/:ebed_labresult_id' }, function () {
});
this.resource('ebedDietContact', { path: '/ebeddietcontact/:ebed_dietcontact_id' }, function () {
});
this.resource('ebedNutritionBmi', { path: '/ebednutritionbmi/:ebed_nutritionbmi_pkid' }, function () {
});
});
});
this.resource('ccprCardioArticles', { path: "/cardioarticles" });
this.resource('ccprCardiologists', { path: "/cardiologists" });
this.resource('ccprInfoSession', { path: "/infosession" });
this.resource('ccprPatientPresence', { path: "/patientpresence" });
this.resource('ccprPresenceOverview', { path: "/presenceoverview" });
this.resource('ccprNextNutritionalAdvices', { path: "/nextnutritionaladvices" });
});
this.resource('ebed', function () {
this.resource('goBack', { path: '/goback' });
this.resource('ebedMedications', { path: '/ebedmedications' }, function () {
});
this.resource('ebedMedication', { path: '/ebedmedication/:ebed_medication_id' }, function () {
});
this.resource('ebedLabResults', { path: '/ebedlabresults' }, function () {
});
this.resource('ebedLabResult', { path: '/ebedlabresult/:ebed_labresult_id' }, function () {
});
this.resource('ebedDietContacts', { path: '/ebeddietcontacts' }, function () {
});
this.resource('ebedDietContact', { path: '/ebeddietcontact/:ebed_dietcontact_id' }, function () {
});
this.resource('ebedNutritionBmis', { path: '/ebednutritionbmis' }, function () {
});
this.resource('ebedNutritionBmi', { path: '/ebednutritionbmi/:ebed_nutritionbmi_pkid' }, function () {
});
});
});
Isn't there a nicer way?
Updated JSFiddle example
You can do the same thing in the new router using the events property in the router to define actions. From the guide:
If the action is not found on the current controller, it will bubble
up to the current route handler. From there, it will bubble up to
parent route handlers until it reaches the application route.
In your example you need to define the goBack action in the parent of your animals.dog and animals.cat routes;
App.AnimalsRoute = Ember.Route.extend({
events: {
goBack: function() {
this.transitionTo('index');
}
} });
This can be called using the standard {{action}} helper from the template.
<a href='#' {{action goBack}}>Go Back</a>