I'm having an issue with Backbone.js. If I came from a route (say site.com#services/strategy), and I navigate back to my index-view (site.com#), I'm sent back to the top of the document. I understand why this works that way, but I'd like to prevent this. Is there a known / recommended way to handle this?
Thanks!
Related
is there any way to fix the URL in a Single Page application when the client moves from one page to an other,but the URL changes in background?
I tried to use #routeProvider but I think it's not my case :/
thanks for Help
I think you are talking about HTML5's History API, especially the .pushState() method.
Check out the browser coverage, nowadays very wide, but that might need fallbacks, according to the old browsers you might want to support.
The biggest problem is that I even don't really know how to describe the problem I'm asking about. It's the first time in more then a decade of wed development.
I'm working on a Rails 4.1.1 app and using angularjs pretty extensively, though I don't know it well yet. And everything seemed to be working fine up to the moment when I tried to add some browser history manipulation to my app (e.g. changing the displayed url when listing though a paginated list so that that url can be copied and distributed). To do this I added a config to my app.
#app.config ($locationProvider) ->
$locationProvider.html5Mode(true)
And then in my angular controller added the $location binding like this
$scope.$watch 'pagination.cur', (newVal) ->
$scope.loadNews newVal
$location.path("/news").search({page:newVal})
(this is ment to change the url in the browser searchbox when the user goes from one page to another).
That workes well, the url does change appropriately, but all the sudden all the html links on the page got broken. I mean litteraly. I click any link on the page (even outside the controller div), the url in the serchbox changes appropriately, but the turbolinks toes not fire the Ajax request to get the new page content. If I then refresh the page, it loads the correct page.
I know it's really weird. What's weirder, that I don't get any JavaScript errors or anything unusual.
The only way I found to get the links working again - is to remove that initial config.
But when I do it, the $location falls back to hashtag syntax, wich is really not at all what I want.
My only assumption is that there could be some kind of a conflict between angular $location service and turbolinks when handling browser history, but even if that's right, I have no idea how to get around it. And I really need that kind of manipulation, 'cause I'm going to be using it alot in this and other apps.
I really don't know, what other information on this problem may be usefull, don't hasitate to ask for updates. I'll post whatever I can.
P.S. Btw, can this kind of manipulation be done by means of turbolinks? 'Cause it's exactly the same thing turbolinks does when changing the displayed url after page body reload, but I can't find any documentation on its public API for that.
UPDATE
Have no idea what's the source of the problem yet, but it seems to be not related to the turbolinks gem. Removing turbolinks requirements from the application.js file does not change anything.
Using $window.history.pushState instead of $location.path solves the functionality problem, but does not explain the initial bug.
Im trying to share data between 2 views. I need to use the 2 views at the same time on two different machines. One is controlling the other(ex: a counter) 1st view has next(+1) and the other just displays the result. I want the data to synchronized/binded. I do not want to have to refresh the 2nd page or to have to pull data with a timer or otherwise.
My idea was to use ng-view and routeProvider, I know that when the view changes the scope is cleared so I tried to use a parent controller/scope, the data is shared but I have to refresh the page on my 2nd view. I tried a service, same thing. I tried to $watch the result of the service but on the second controller/view no event is picked up so the view doesn't update.
what is the way to go? I was thinking about broadcasting or emit a custom event and trying to catch it, will that work? Am I just not binding to the service correctly? Would ui-router work better? I feel there should be an easy way to do this.... Im not seeing it! Please help if you can.
One of the simplest (in my opinion) implementations of client-client communication is using WebSockets. While that does have compatibility limitations (some browsers), that can easily be overcome by using a library like socket.io. Also, it's easy to write an Angular wrapper/service over socket.io that can be shared across components of your app, or even different modules.
It's also pretty simple to write a Node backend with socket.io
This might be a good read.
I would suggest you to focus on pushing stream rather than sharing it. Some how you need to push stream to second view which is changes in first view.
You may want to check this
Is there some way to PUSH data from web server to browser?
What is the purpose of Backbone's Router? Can't we do the same thing without it? With a router, a click on a link would change the URL of a page and the last bits of the URL would trigger a function. Why not just assign a click event on this link and trigger a function there?
I don't use backbone specifically, (rather, I use iron-router for my project) but it's purpose is to route URLs to pages. Consider the following: you have 50 links scattered across your website's source all pointing to /awesomePlace (which serves awesomePlace.html). You've decided awesomePlace isn't so awesome anymore and have declared that there is a moreAwesomePlace.html. You could go in and change each of those 50 links to /moreAwesomePlace or you could change the route once. The router could then serve up moreAwesomePlace.html whenever anybody visits /awesomePlace.
That's just one example. I personally haven't spent too much time with routers yet but I'm sure somebody can give some better examples than I have. Hopefully this helps explain things a bit though.
Yes, we can implement same functionalities without router, router is just an helper utility, just like JQuery for DOM manipulations. Reason behind using router all about scalability and flexibility. If you follow "on click do some thing", it does't scale. In a single page application every click might have multiple handlers. One click on item might demand changes to multiple widgets. with routers you can add/remove hooks for the same click. And in future if you want to change the implementation of Router or hooks, you are free to do that, only thing that you need to make sure is contract btw these two remain same.
I'm building a Backbone.js app with hash based navigation. It works fine everywhere except IE7. In IE7, when I click on a link that changes the hash, what happens is:
the page changes
the hash then reverts to the previous value
the page changes to the previous page as well
I made the links work by adding saveLocation calls to the controller after loading each page, however when I use the back button or reload the page, it always takes me to the home page instead of going back or reloading the current page.
What can I do to make the back button and page reloading work?
I made some changes to backbone to make it work for me. You can have a look at my repo here:
https://github.com/juggy/backbone
Works for me so far. I dunno if I broke anything else. I inspired myself from YUI and https://github.com/cowboy/jquery-hashchange/blob/master/jquery.ba-hashchange.js .
I also had same IE7 problem with you, and tried every way (saveLocation things, Backbone patches, etc).. but it didn't work out. It seems IE7 misunderstand when switching thru many pages.
My final solution was not to use Backbone.history but jQuery History Plugin.
http://tkyk.github.com/jquery-history-plugin/
I know this is the worst workaround because this solution relies on other plugin, but fortunately, Backbone.Controller just handles routings and state handling that you don't have to use it.
jQuery History Plugin just works.
An answer has been posted in Backbone.js cause bug only in IE7.