In EmberJS you can build a URL route as?:
http://www.mydomain.com/section/detail-123.html
123 is a variable
in angularJS the separators in URLs must be slash, I think also in Ember
Is there a framework of this kind that can do this kind of URLs?
In ember one can achieve this kind of urls by combining the possibilities provided by the serialize hook of Route class (http://emberjs.com/api/classes/Ember.Route.html#method_serialize) to modify the url as required and Ember.Location (http://emberjs.com/api/classes/Ember.Location.html) to remove the hash tag and enable only slashes in the url.
Example,
http://emberjs.jsbin.com/jenabegi/1/
http://emberjs.jsbin.com/jenabegi/1/edit
App = Ember.Application.create();
App.Router.map(function() {
/*the /jenabegi/1 part is added to make it function in jsbin*/
this.route('index', {path: '/jenabegi/1/' });
this.route("detail",{path:"/jenabegi/1/section/:detail_id"});
});
App.Router.reopen({
location: 'history'
});
App.IndexRoute = Ember.Route.extend({
redirect:function(){this.transitionTo("detail",{value:"123"});}
});
App.DetailRoute = Ember.Route.extend({
serialize:function(model,params){
return {"detail_id":"detail-"+model.value+".html"};
}
});
Related
I was unable to find any current answers for this question.
I am building my latest project in Ember and while I am able to access the different routes directly and with refreshes locally, as soon as I build for production and host the site, this no longer works. I believe the slug portions of my routers are correct so not sure what I need to update.
Note: I am using Ember CLI.
Router.js
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('reviews', function() {
this.route('index', {path: '/'});
this.route('review', {path: '/:review_id'});
});
this.route('movies');
this.route('about');
this.route("error", { path: "*path"});
});
Review Model
export default Ember.Route.extend({
model(params) {
const id = parseInt(params.review_id);
const movies = this.get('movies');
return movies.getMovieById(id);
},
movies: Ember.inject.service()
});
If I try to directly access or refresh /about, /reviews, /movies, or /reviews/:review_id I am given a 404. Even though the about route doesn't have a model to retrieve any data. It's simply loading a template. The only route I can refresh on is the very index page of the site.
I found this link here which instructed how to update your htaccess file to redirect requests to Ember's index file. This looks to have solved my problem:
http://discuss.emberjs.com/t/apache-rewrite-rule-for-html5-browser-history-url-bookmarkability/1013
In Flow Router, I have some routes
/projects/project-name
/projects/project-name/tasks
/projects/project-name/tasks/deleted-tasks
/projects/project-name/tasks/completed-tasks
/projects/project-name/tasks/labels/school
/projects/project-name/tasks/labels/football
/projects/project-name/tasks/labels/training
/projects/project-name/tasks/labels/personal
[...]
So almost all of my routes should share most of the same characteristics.
Are there any tricks to group my routes, so I do now have to check if the project exists in every single route or if can I say that some routes build upon other routes, so I do not have to write the long paths for all the routes?
I have found Flow Router, but it doesn't seem that's right tool to accomplish what I need.
Flow router definitely has the ability to group your routes. You can group them as follows -
var projectRoutes = FlowRouter.group({
prefix: '/projects/project-name',
name: 'projects',
});
To handle routers within this group, you can add
// route for /projects/project-name
projectRoutes.route('/', {
action: function() {
BlazeLayout.render(...);
}
});
// route for /projects/project-name/tasks
projectRoutes.route('/tasks', {
action: function() {
BlazeLayout.render(...);
}
});
This is just an example for grouping your routes.
You can read more here.
I start to learn how to use backbonejs for a web app and I've got a little problem with the defaultRoute when the app is launch.
Here is my script
var AppRouter = Backbone.Router.extend({
routes: {
"user/:id": "getUser",
"*actions": "defaultRoute"
}
});
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function() {
$("#content").load("pages/page1.html");
});
app_router.on('route:getUser', function(id) {
$("#content").load("pages/user.php?id="+id);
});
Backbone.history.start();
When you go on the App like http://www.myapp.com the defaultRoute is not loaded.
When I click a link not referenced in the routes, page1.html is loaded.
My question is: How can I set the defaultRoute when I go on the app ?
Thank you
Your code demonstrates a somewhat unusual use of backboneJS, as you're loading complete HTML or pages into a the div container, instead of using backbone views and underscore templates.
Regardless, you may want to consider the following implementation, instead of using the app_router.on(...) syntax.
Consider the following implementation:
var AppRouter = Backbone.Router.extend({
routes: {
"":"defaultRoute" //The router will default to this route if no other routes are matched ("")
"user/:id": "getUser",
...more routes
},
defaultRoute:function(){
...default route functionality
},
getUser:function(id){
...
}
});
I have a Router.map defined to my application. I'm working with EmberJS AppKit architecture. https://github.com/stefanpenner/ember-app-kit
I'd like to access to my page "profile" using the following path:
http://localhost:8000/#/profile
But, the name of my route differ to this path, because it's call user-profile, so I did this:
router.js
var Router = Ember.Router.extend();
Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
});
export default Router;
user-profile.js
export default Ember.Route.extend({
model: function () {
return this.store.find('user-profile');
}
});
When I launch my application, Ember is telling me that profile route doesn't exist, even though I defined the path:
Uncaught Error: Assertion Failed: Error: Assertion Failed: The URL '/profile' did not match any routes in your application
Do you know what's wrong with my code at this point?
Thanks
I dont use ember appkit but perhaps try with underscore, ie 'user_profile' and rename your file too. Just a shot in the dark.
I would have to guess it is the way that you are designing your router and the namespace.
Typically a barebones Ember app requires:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
App.Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
In your example your router is not in the App namespace, or whatever your root object is named (It doesn't have to be 'App'). I would give this a try or maybe post more code if there are other factors I do not see here.
Also, typically you would name your route userProfile. While i dont think the dasherized name is a problem, it doesn't follow Ember naming conventions.
Hope this helps.
I am trying to setup a route with the following:
App.Router.map(function() {
this.route('login');
this.route('mlb.lineups', {path: 'tools/mlb/lineups'}, function() {
this.resource('site', { path: 'site/:site_id' });
});
});
The problem is, the nested resource 'site' route is not being recognized. If I change mlb.lineups to a type resource, that seems to have funky behavior as well. Ideally I have a root level /tools/mlb/lineups and then site specific URLs/resources such as /tools/mlb/lineups/site/1 /tools/mlb/lineups/site/2 etc.
resources/routes can not live under routes.
http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources