I have a working app using Backbone 0.5.3, which is no longer working using backbone 0.9.2.
I identified that Router.navigate() doesn't call my route for some reason.
Here's my Router:
var Router = Backbone.Router.extend({
routes: {
'/mypage': 'mypage',
},
mypage: function() {
// show page ...
}
});
Calling the route manually like so works fine:
Router.mypage()
I also tried to overwrite backbone's .navigate method to debug my app ...
var Router = Backbone.Router.extend({
routes: {
'/mypage': 'mypage',
},
navigate: function(fragment, options) {
console.log("navigate called");
Backbone.history.navigate(fragment, options);
},
mypage: function() {
// show page ...
}
});
... it seems that .navigate is called but ...
Backbone.history.navigate(fragment, options);
... just doesn't call the route.
I'm using PushState, here's my initial call:
Backbone.history.start({
root: '/',
pushState: true,
silent: true
});
Already tried it without the root and silent parameters - no success.
Again: This works using Backbone 0.5.3.
Thanks to everyone leaving a reply!
Achim
You have to set the trigger option for the navigate method, e.g:
Router.navigate("/mypath", {trigger: true})
From the fine manual:
extend Backbone.Router.extend(properties, [classProperties])
Get started by creating a custom router class. [...] Note that you'll want to avoid using a leading slash in your route definitions:
I'm guessing that you simply need to remove the leading slashes from your routes, for example:
routes: {
'mypage': 'mypage',
},
You must create instance of Router.
var router = new Router();
router.navigate(...);
Related
Really new to ember and trying to setup basic (in my mind) routes.
I have calendars resource and I want to display individual calendars.
My app/router.js has the following:
this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
this.route('show');
this.route('edit');
});
this.route('calendars', function(){
this.route('create');
});
Folders are as following:
app/routes: [
calendars: [create, index],
calendar: [edit, show]
]
app/templates: [
calendars: [create, index]
calendar: [edit, show]
]
In app/routes/calendar/show.js:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('calendar', params.calendar_id);
}
});
Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :
when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5
(a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined
How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p
Edit [2]:
I am trying this now and I think it kinda works, but looks ugly:
this.route('calendars',{ path: '/calendars'}, function(){
this.route('create');
});
this.route('calendar', { path: '/' }, function () {
this.route('show', { path: '/calendars/:calendar_id/show' });
this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});
Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.
It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.
Try explicitly define your route path with the parameters as per ember docs:
https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/
this.route('calendar', function () {
this.route('show', { path: '/:calendar_id/show' });
this.route('edit', { path: '/:calendar_id/edit' });
this.route('create');
});
Is there a way to execute when a "base" route is activated/re-activated? I have the following urls:
Router.map(function() {
// /projects
this.resource('projects', function() {
// /projects/2
this.resource('project', {path: ':id'});
});
});
I'd like to transitionTo the individual project route if there is only one project returned from the projects route. I can do this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('project');
},
afterModel: function(projects, transition) {
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
}
});
This works nicely...except i can still go to the projects route and since the model has already been loaded that hook doesn't fire again. Is there a way to listen to always enforce that rule when the projects route is activated?
For example, if i go to /projects/23 and then i go to /projects i'd like to auto-transition them to the single project route if there is only one. I don't know how to accomplish that since it's a nested route and the activate and afterModel methods have already been fired when visiting /projects/23 for the first time.
Does that make sense? and how can i accomplish this?
Use an index route on your projects resource. It will only get hit when you hit /projects
ProjectsIndex
export default Ember.Route.extend({
model: function() {
var projects = this.modelFor('projects');
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
},
});
I'm trying to change default root through backbone.history.start
So, i'm starting with:
router.js
router = Backbone.Router.extend({
routes: {
'' : 'home'
},
home:function(){
console.log("home");
}
});
app.js
var app = Backbone.View.extend({
initialize: function(options)
{
var AppRouter = new router();
Backbone.history.start({pushState: true,root: "/home"});
}
});
So, after this example, if i trigger
mydomain.com/
will fire up "home"
My main page is entirely served by server side.
ie:
mydomain.com/
after successful login, user is redirected to mydomain.com/home which should be prepared and render by client side.
So, i just want set my root to mydomain/home and not mydomain/ which is default to backbone.history.start
am i missing something?
Backbone.history.start({pushState: true,root: "/home"})
fired up always in this two cases
I am playing around with Ember and I have a simple page in which I try to define some routes like this:
App.Router.map(function() {
this.resource('posts', function() {
this.route('new');
});
});
This code is exactly copied from here. When I try to open index.html#posts in my browser, I get this error:
Assertion failed: The URL '/posts.index' did not match any routes in your application
I am running Ember 1.2.0.
you also must define a posts index route
App.PostsIndexRoute = Em.Route.extend({
});
or just the posts route
App.PostsRoute = Em.Route.extend({
});
http://emberjs.jsbin.com/ENEHUQI/1/edit
I am generating a static site using Jekyll. I am using backbone.js to do few routings.
Suppose the home page is at localsite.com... I am not sure how to generate routes for the following URLs.
http://localsite.com/hulk &
http://localsite.com/thor
The hulk and thor are the names to be routed.
and my backbone.js router is as follows:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
}
});
// Initiate the router
var app_router = new AppRouter;
app_router.on('route:nameRoute', function(name) {
console.log(name);
})
Backbone.history.start({pushState: true});
</script>
I am not able to get this working. Is there something I am missing?
Will I be able to do this routing with Jekyll?
My Jekyll's _config.yml has
permalink: pretty
How do get these routes working?
Are there any other suggestions? My goal is to get a similar routing when hosted on github pages.
As far as the routing goes, it is pretty straight forward. The second part is the name of the function that will be called, which should be defined inside your router. So just change your code to this and it should work:
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
},
nameRoute: function(name){
console.log(name);
}
});
// Initiate the router
var app_router = new AppRouter;
Backbone.history.start({pushState: true});
If you run into trouble with pushState and getting rid of the backbone-default hashtags, check out this SO question BackboneJS - Router issues - how to get clean URL's (particularly important for local links, if you don't want to keep reloading from the server), and here is an example of a site getting rid of their #: http://artsy.github.io/blog/2012/06/25/replacing-hashbang-routes-with-pushstate/