I have a layout template but want to apply an alternative layout template. I have created altLayout.html but how do I apply it to my route?
Router.configure({
layoutTemplate: 'layout',
notFoundTemplate: 'pageNotFound',
//waitOn: function() { return Meteor.subscribe('items'); }
});
Router.map(function() {
this.route('main', {
path: '/',
template: 'main',
notFoundtemplate: "pageNotFound",
oldBrowserTemplate: "oldBrowser",
onBeforeAction: function () {
// render the unsupported browser page if user isn't using Chrome
if(BrowserDetect.browser == "Chrome"){
layoutTemplate: 'altLayout',
this.render('oldBrowser');
this.stop();
}
},
});
});
The following works for me:
Router.route("/product/:id",
{
name: "product_page",
template: "product_page",
layoutTemplate: "product_page_layout",
data: function()
{
return {id: this.params.id}
}
});
The "product_page_layout" is where your altLayout.html template goes. Basically:
Router.map(function() {
this.route('main', {
path: '/',
template: 'main',
layoutTemplate: "altLayout",
notFoundtemplate: "pageNotFound",
oldBrowserTemplate: "oldBrowser",
onBeforeAction: function () {
// render the unsupported browser page if user isn't using Chrome
if(BrowserDetect.browser == "Chrome"){
layoutTemplate: 'altLayout',
this.render('oldBrowser');
this.stop();
}
},
});
});
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
So, I'm trying to use the Twitter-style URL syntax, allowing a user to go to example.com/quaunaut to visit the user page of the user with the username 'quaunaut'. I was able to accomplish this via:
app/router.js
export default Router.map(function() {
this.route('users.show', { path: '/:user_username' });
});
app/routes/users/show.js
export default Ember.Route.extend({
model: function(params) {
return this.store.find('user', { username: params.user_username }).then(function(result) {
return result.get('firstObject');
});
},
serialize: function(model) {
return { user_username: model.get('username') };
}
});
Now, when live or run via ember s, this works fantastically. However, in tests, it seems for some reason to not resolve.
var application, server, USERS;
USERS = {
'example1': [{
id: 1,
username: 'example1'
}],
'example2': [{
id: 2,
username: 'example2'
}]
};
module('Acceptance: UsersShow', {
beforeEach: function() {
application = startApp();
server = new Pretender(function() {
this.get('/api/users', function(request) {
return [
201,
{ 'content-type': 'application/javascript' },
JSON.stringify(USERS[request.queryParams.username])
];
});
});
},
afterEach: function() {
Ember.run(application, 'destroy');
server.shutdown();
}
});
test('visiting users.show route', function(assert) {
visit('/example1');
andThen(function() {
assert.equal(currentPath(), 'users.show');
assert.equal(find('#username').text(), 'example1');
});
});
Which results in the following test results:
Acceptance: UsersShow: visiting users.show route
✘ failed
expected users.show
✘ failed
expected example1
So, any ideas why currentPath() isn't resolving? If you also have any recommendations for better means to implement what I'm looking to do here, I'm certainly open to it.
Your visit syntax isn't quite right, should be:
test('visiting users.show route', function(assert) {
visit('/example1').then(function() {
assert.equal(currentPath(), 'users.show');
assert.equal(find('#username').text(), 'example1');
});
});
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.
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>
I'm playing around with ember.js and am stuck somehow finding out how to build up the structure the right way. I could follow all examples, but have some problems putting them all together.
I'm using require.js and handlebars.
My directory structure looks like this:
- app
- - controllers
- - css
- - helpers
- - lib
- - models
- - routes
- - templates
- - - partials
- - views
My application.js looks like this:
require.config({
paths:{
jquery:'lib/jquery-1.7.2',
handlebars:'lib/handlebars',
ember:'lib/ember',
ember_data:'lib/ember-data',
text:'lib/requireJS/text',
md5:'lib/md5',
spin:'lib/spin'
},
shim:{
'ember':{
deps:[ 'jquery', 'handlebars'],
exports:'Ember'
},
'ember_data':{
deps:[ 'ember'],
exports:'DS'
}
},
waitSeconds:15
});
define('application'
,[
// Routes
'routes/app_router'
// Controller
,'controllers/application_controller'
// Views
,'views/application_view'
,'views/category/category_list_view'
// Libraries
,'jquery'
,'handlebars'
,'ember'
,'ember_data'
,'spin'
]
, function (
// Router
Router
// Controller
,ApplicationController
// Views
,ApplicationView
,CategoryListView
// Models
,Category
,Product
)
{
return Ember.Application.create({
VERSION: '1.0.0'
,rootElement:'#main'
// Load Router
,Router:Router
// Load Controllers
,ApplicationController:ApplicationController
// Load associated Views
,ApplicationView:ApplicationView
,CategoryListView:CategoryListView
// Load Models
,Category:Category
,Product:Product
//Persistence Layer,using default RESTAdapter in ember-data.js.
,store:DS.Store.create({
revision:10
,adapter:DS.RESTAdapter.create({
bulkCommit:false
,serializer:DS.Serializer.create({
primaryKey:function (type) {
return type.pk;
}
})
,mappings:{
//categories:Category
}
,namespace:'api'
,url: "https://example.org"
})
})
,ready:function () {
}
});
}
);
Then my application controller
define(
'controllers/application_controller'
,['ember' ],
function () {
return Ember.Controller.extend({
init: function() {
}
});
}
);
The application view:
define('views/application_view', [
'text!templates/application.html',
'ember'
],
function(Application_markup) {
return Ember.View.extend({
template: Ember.Handlebars.compile( Application_markup ),
elementId: 'container',
didInsertElement: function() {
this.$().hide().show("slow");
}
});
}
);
And, finally, the application.html template
<div id="container">
<div id="header">
FOO BAR
</div>
<div id="navigation">
{{outlet mainNavigation}}
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
What I am trying to do now is to include another template into the main application template (category_list). I guess I either have to do this in the HTML template itself, or in the application view - but in case of the latter one I don't know how to configure/parse/bind more than one template.
What is the best practice of building individual, independent, modular templates and to put them all together? Where exactly should this happen?
Or is this even a wrong approach of using ember.js?
Maybe one of you could make some things more clear to me.
Thanks.
EDIT #1
app_router.js
define('routes/app_router',
['ember' ],
function () {
return Em.Router.extend({
enableLogging:true, //useful for development
/* location property: 'hash': Uses URL fragment identifiers (like #/blog/1) for routing.
'history': Uses the browser's history.pushstate API for routing. Only works in modern browsers with pushstate support.
'none': Does not read or set the browser URL, but still allows for routing to happen. Useful for testing.*/
location:'hash',
/* location: 'history',
rootURL:'/app',*/
root:Ember.Route.extend({
index:Ember.Route.extend({
route:'/'
/*,connectOutlets:function (router) {
//Render application View ,sign in.
v = router.get('applicationController').get('view');
if (v) v.remove();
App.router.get('applicationController').set('loggedin', false);
router.get('applicationController').connectOutlet({name:'login', outletName:'loginform'});
router.get('loginController').enterLogin();
}*/
})
/*,contacts:Em.Route.extend({
route:'/contacts',
showContact:function (router, event) {
router.transitionTo('contacts.contact.index', event.context);
},
showNewContact:function (router) {
router.transitionTo('contacts.newContact', {});
},
logout:function (router) {
jQuery.ajax({
url:'/site/logout',
type:'POST',
success:function (response) {
if (!response.authenticated) {
router.get('applicationController').set('loggedin', false).get('view').remove();
router.transitionTo('root.index', {});
}
}
})
},
index:Em.Route.extend({
route:'/',
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin'))
router.get('applicationController').connectOutlet('contacts', App.store.findAll(App.Contact));
else router.transitionTo('root.index');
}
}),
contact:Em.Route.extend({
route:'/contact',
index:Em.Route.extend({
route:'/:contact_id',
deserialize:function (router, urlParams) {
return App.store.find(App.Contact, urlParams.contact_id);
debugger;
},
showEdit:function (router) {
router.transitionTo('contacts.contact.edit');
},
connectOutlets:function (router, context) {
if (router.get('applicationController').get('loggedin'))
router.get('contactsController').connectOutlet('contact', context);
else router.transitionTo('root.index');
}
}),
edit:Em.Route.extend({
route:'edit',
cancelEdit:function (router) {
router.transitionTo('contacts.contact.index');
},
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin')) {
var contactsController = router.get('contactsController');
contactsController.connectOutlet('editContact', router.get('contactController').get('content'));
router.get('editContactController').enterEditing();
} else router.transitionTo('root.index');
},
exit:function (router) {
router.get('editContactController').exitEditing();
}
})
}),
newContact:Em.Route.extend({
route:'/contacts/new',
cancelEdit:function (router) {
router.transitionTo('contacts.index');
},
connectOutlets:function (router) {
if (router.get('applicationController').get('loggedin')) {
router.get('contactsController').connectOutlet('editContact', {});
router.get('editContactController').enterEditing();
} else router.transitionTo('root.index');
},
exit:function (router) {
router.get('editContactController').exitEditing();
}
})
})*/
})
});
}
);
EDIT #2
I changed the router now as follow, but it does not do anything.
define('routes/apps_router', ['ember'],
function () {
return Em.Router.extend({
enableLogging:true
,location:'hash'
,map: function (match) {
match("/").to("CategoryList", function (match) {
match("/").to("mainNavigation");
});
}
,root:Ember.Route.extend({
index:Ember.Route.extend({
route:'/'
,renderTemplates: function() {
this.render('mainNavigation', {
into: 'CategoryList'
});
}
// ....
});
}
);
Kind regards,
Christopher
if you use the latest release of ember with v2 router, you can do something like this:
App.Router.map(function (match) {
match("/").to("categoryList", function (match) {
match("/").to("foo");
});
});
In your catergoryList template, put an {{outlet}} (you can optionally name it)
Then, your route for the template you want to insert into catergoryList will be like this:
App.fooRouter = Ember.Router.extend({
renderTemplates:function () {
this.render('foo', {
into:'catergoryList'
});
}
})
A good example of this in practice can be found here: https://github.com/sh4n3d4v15/ember-todos