In backbone how do get access to the root of pushState the reason is I want to create a backbone back button but I want to access the root url
Backbone.history.start({ pushState: true, root: 'admin/brands/' });
I want to access root so I can destroy Models and Views using back button so I want to get the brands section part
You can access it like Backbone.history.root
Related
In our team, we want to use angular-ui-router to assign a "state" by reading the url without hashbangs or html5mode, so that 1. We programmatically assign controllers based on "normal" urls and 2. We support ie9
We can't support hashbangs (which would give use ie9 support) because we are running this on a "non-spa website" and the urls are rendered server side. We literally just want to assign a state by reading a normal url on page load.
This seems trickier than I previously thought. Consider the following routes:
//Parent view
.state('abc', {
abstract: true,
controller: 'MainController'
})
//Search
.state('abc.Search', {
url: '/booking/search',
controller: 'SearchController'
})
Here is the goal: We want the whole path http://website.com/booking/search to pick up the state NOT http://website.com/#/booking/search, and we can't remove the # by adding html5mode.
If we try to add html5mode the page keeps refreshing in ie9 (we dont support ie8).
Now I know that we can remove state-routing and go back to adding ng-controller to the template, however we are in a unique position where we need to be able to programmatically assign controllers based on the url. This is the advantage on using angular-ui-state router.
Thanks in advance.
In my application I am using backbone views for different pages like users, tasks, calendar etc by using backbone router I am switching from one view(e.g Taskview) to another view(say calendar view). everything works fine except dom ready function don't work after I switch the view.
Backend of my application is in laravel so I have a common laravel view for all pages and I am just switching backbone views without any page refresh. My dom ready functions work one time after page refresh but if I switch to another view they stop working.
Note: Dom ready functions are linked to view template classes and id's. All view's have similar templates and similar id's. But when I switch views I remove the old view and appends new view along with its templates.
Any ideas how can I get these working. for document ready I am using domready from require.js
You might be misunderstanding what $( document ).ready() is.
$( document ).ready() will only run once the page Document Object
Model (DOM) is ready for JavaScript code to execute.
http://learn.jquery.com/using-jquery-core/document-ready/
And Since You are making SPA(single page application) which control DOM to change page and never move to another html file.So $( document ).ready() only get fired once.
Backbone.js fires "route" event when Backbone changes page.
"route" (router, route, params) — Fired by history (or router) when
any route has been matched.
http://documentcloud.github.io/backbone/#Events-catalog
yourMainController.listenTo(yourRouter,"route", function(route, params) {
console.log("move to " + route);
});
You can use the event instead.
I have a single page app using Dart and Polymer. I'm trying to add a route to another page with route_hierarchical
What I've tried so far was configuring the router like this:
router = new Router()
router.root
..addRoute(name: 'games', path: '/games')
..addRoute(name: 'login', path: '/login')
..addRoute(name: 'home', defaultRoute: true, path: '/');
router.listen();
I've found that I can use
new Router(useFragment: ...);
to enable the hashbangs in the URLs or not. The problem is that when I don't use hashbangs, I can't access a page using the URL directly. (meaning the app routes me when I click on buttons and such). Is there a way of having sharable URLS with no hashbangs? I've seen AngularJs using something like
$locationProvider.html5Mode(true)
to remove the hashbangs and still have sharable URLs... I don't know if I really should bother having URLs without hashbangs though. I've read having them is going to give me trouble with SEO, is that right?
I'm only using Polymer and route_hierarchical right now, and didn't want to go for angular.dart just for routing.
You need to use a router on the server side too when you want to use URLs without fragments.
see also
httpd.conf and HTML5 pushstate()
Angular dart bookmarking views
AngularJS routing without the hash '#'
I'm trying to create an ASP MVC 4 project with Ui-Router, however I've come across a problem.
My current server-side routing configuration looks like this:
// Controller/Action route
routes.MapRoute(
name: "Default",
url: "{controller}/{action}");
// Redirect any other routes to Site/Index so AngularJS can handle routing
// Place routes above this otherwise they will be ignored
routes.MapRoute(
name: "Catch-All Redirect to Index",
url: "{*url}",
defaults: new { controller = "Site", action = "Index" }
);
And client-side
angular.module('loluk.home')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: '/home/index'
});
}]);
Site/Index, the redirect action, simply contains the HTML file that has the ng-app directive. Any other actions/controllers will return API data, or a template. So, in my case, I have Home/Index which returns a template containing <h1>Hello, World!</h1>.
This is all fine and dandy if one of my states in ui-router requests "home/index" via templateUrl for my application. However, the problem I have now is that if I browse to http://localhost/Home/Index, I will see the template in it's raw form - rather than what I am expecting to see, which is the whole application in the Home/Index state. This makes sense as that is how I have configured it.
I initially thought "OK, well I can solve this problem by redirecting everyone to Site/Index (where the main file is stored) and using inline templates". Well, this works well, until you consider that
The HTML file containing index.html is going to get ridiculously large and contain every template
This breaks escaped_fragment crawling
So right now I am at a loss of how to make this work; I could use inlining, but that would make web pages load slowly and break SEO. I could stick with what I have.. but that will break any bookmarks that end-users create.
Making template calls a ChildActionOnly worked well until the fact that ChildActionOnly will return a server 500 (rather than a redirect), and UI-Router appears to not qualify as a "Child Action" as requesting the template through templateUrl also triggered the server 500.
I did come across this question, however it doesn't express how exactly to solve the template situation.
Another avenue I have just pursued is having a templates area that contains all of my templates, and an api area that contains all of my api details (/templates/ and /api/ respectively). This solves the whole reloading page problem, though I am still unsure of how to approach the escaped_fragment crawling from this point of view.
I've accomplished this by creating two Areas in MVC - one for API that routes to /api/ and one for Templates that routes to /templates/. AngularJS will make calls to /template/{controller}/{action} which will return a plain HTML view, and make RESTful calls to /api/{controller} for retrieving data.
It's not a perfect solution but it works.
According to the Backbone.js page:
Until recently, hash fragments (#page) were used to provide these
permalinks, but with the arrival of the History API, it's now
possible to use standard URLs (/page).
I tried to add this router rule:
routes: {
'test': function() {
alert('ok'); }
}
And called the Backbone.history.start({pushState: true, root: '/myroot/'}). I have a link in my page as:
test me
I intercepted the link's click event with:
$('a[href=test]').click(function(e) {
router.navigate('test');
e.preventDefault(); });
When I click on the link, a request is not made, which I believe the interception was succeeded. But the event is not triggered.
So, please help me understand how this History API works. Or point out where I have done wrong.
You need to turn on pushState:
Backbone.history.start({pushState: true});
Your link is going to force a full refresh from your server and your server must respond with the content of that url.
You need to intercept that link's click and tell your router to navigate to the "test" route:
myRouter.navigate("test");
For more info on the HTML5 history api: http://diveintohtml5.info/history.html
for some intro level info on using pushState with Backbone:
http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
And a video of a presentation I gave that covers all of this:
http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/
Hope that helps.
You'll need to add {trigger: true} to the navigate call to actually trigger routing events.
To indicate that you'd like to use HTML5 pushState support in your application, use Backbone.history.start({pushState: true}). If you'd like to use pushState, but have browsers that don't support it natively use full page refreshes instead, you can add {hashChange: false} to the options.
PS! If your application is not being served from the root url / of your domain, be sure to tell History where the root really is, as an option (otherwise the navigation won't work!):
Backbone.history.start({pushState: true, root: "/public/search/"})