If I am serving my Backbone application from http://example.com/foo/bar.html, what should I specify the application root as? E.g.:
Backbone.history.start({
pushState: true,
root: '/foo/'
});
vs
Backbone.history.start({
pushState: true,
root: '/foo/bar.html'
});
In fact, does it even matter as far as Backbone routing and history are concerned?
I notice that if I use the former form, images with relative URLs become broken because pushState would cause the (apparent) location of the window to change to a string like /foo/login, and then a relative URL like img/orange_cat.jpg gets resolved to /foo/login/img/orange_cat.jpg by the browser, when I really want /foo/img/orange_cat.jpg.
The first form is the correct one.
To fix the broken images issue
And add this to your head tag
<base href="/foo/" />
Related
This url bellow, load the page:
/app/#/rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd
(I also tried /app/#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd )
(and also tried /app#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd)
...then become
/app/rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd
How to keep the # in the url ?
You should use /app#rGd4FaNjg22EvTuot3SRKF1suueUSc8Lhd, without the slash after the pound sign. The slash indicates another level in the URL.
It looks like you've started Backbone.history with pushState:true option. I would guess it looks something like this in your code:
Backbone.history.start({ pushState: true, root: '/app' });
That pushState options removes the # for you.
Docs: http://backbonejs.org/#History
So if you don't want your front-end routes be handled as if they are back-end urls, just set pushState option to false, or remove it because false is the default. When it's false the backbone routes will be handled with #.
I try to stop angular to modify the URL format
like from 'mail.google.com/#inbox'
to 'mail.google.com/#/inbox'
the context is I'm developing a Chrome extension, and customer like to use it with Streak in the same time. But sometimes my app will stop 'pipeline' feature of Streak shows up.
And the reason I guess is angular change the URL to different format therefore, stop some function of Streak(maybe)
so, to prevent angular add slash after hash tag,
I use html4 mode in config like
$locationProvider.html5Mode(true);
in fact, it works! but with error message:
$location in HTML5 mode requires a tag to be present!
so I change it the config part to
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
then error message disappear, but slash will be encode
ex:
"mail.google.com/#pipeline/aaabbbccc..."
become
"mail.google.com/#pipeline%2Faaabbbccc..."
and pipeline not shows up.
then I find method to prevent slash encode from this method
I change config back to
$locationProvider.html5Mode(true);
and add tag to head to index;
as I'm developing a inject script app
I add the html tag by Jquery in content script
$('head').append('<base href="/">');
then situation become weird,it will open new tab and sometimes sign me out of gmail, also pipeline not shows as well.
Furthermore, I find the thing trigger URL change is some directive use $state
Is somebody have idea how to prevent angular modify URL formate change?
or my assumption of reason is wrong?
I have a backbone application residing at say, http://foo.com. My application behaves different for different region, so say if I navigated to http://foo.com/TX different set of information is loaded, while if I navigate to http://foo.com/OK another set of information is loaded. These necessarily do not form part of the backbone route and are part of the url itself.
I have also modified my backbone route to ignore this second parameter in the url while considering routes in my router initialize function,
routes = [
[/\w+/, 'default', this.default],
[/\w+\/login/, 'login', this.login]
];
_.each(routes, function(route) {
router.route.apply(router,route);
});
But when I do app.navigate("login", true), it changes my URL to http://foo.com/home. What I expect to see is http://foo.com/TX/home, so that it retains the region information. How can I achieve that?
Assuming your app is located at a given location, your router is going to go back to that location, without adding on the extra region code. One option would be to extend your router model and override backbone's navigate function (documentation) to incorporate the region codes, but that could be dangerous and beyond the scope of what you'd like to take on yourself.
Another option is to call the path on your router without updating the URL (documentation). This would run your code and update the page, but would not reset the URL as you desire. with this option, you would want to call the router with the option
router.route.apply("login", {trigger: true, replace: false})
According to their tutorial:
All location properties can be either a Supersonic routes or URLs.
When I use this in structure.coffee, nothing is loaded, only the initial splash screen is shown:
rootView:
location: "http://example.com/page1"
What else should I set?
It looks like this is a current issue on GitHub.
From that post:
A workaround is to run a local clone of Steroids and change
https://github.com/AppGyver/steroids/blob/master/src/steroids/features.coffee#L6
to be false, after which you can write
splashscreen:
autohide: true
in your config/app.coffee.
let's say that I have two "pages" (endpoints) on a chaplin.js site
the routes:
match('', 'first_controller#show');
match('second_view', 'second_controller#show');
and two links:
Go to home
Go to Second
the generated urls are "correct":
mysite.com/something/ (home)
mysite.com/something/second_view (second view)
(notice that I'm not on the root of the site). When I start the application at "home" and then click the "Go to second" link i get correctly redirected to the second view, everything gets tendered correctly and the url on the browser changes to mysite.com/something/second_view
But then I cannot refresh the navigator since my webserver will try to reach a second_view folder instead, and I'll get a 404.
What i need is to always generate the urls using a # like in backbone, something like mysite.com/something/#/second_view.
BTW: that last link works but chaplin deletes the # (like a redirect)
Maybe I need to configure something? or change something on the ùrl`helper, I couldn't find anything in the docs. Any Ideas??
Thxs
Backbone itself allows this functionality out of the box, through
Backbone.history.start({pushState: false})
(the default)
You can see the startHistory call here.
You just have to pass this options object as a second parameter to initRouter in your Application :
this.initRouter(routes, {pushState: false});