In my app..
While i load the page or refresh the page my router not properly responding and calling the default view method. in case if i use other link to vist other hash url... works as well the back button doing fine.
Even while i load my page, my initiate function as well works fine. but the default method not triggering while i load the page and use the back button of the browser.
what cause this.. here is my code:
define([
"backbone",
"../model/model",
"../collection/collection",
"../views/appView",
"../views/listView",
"../views/appViews"],
function(Backbone,appModel,collection,appView,listView,appViews){
var appRouter = Backbone.Router.extend({
routes:{
"":"defaultView",
"list":"listAItem",
"add":"listViewIt"
},
initialize:function(){
console.log("initiated....."); //works properly
},
defaultView:function(){
new appViews(); // not working..
},
listAItem:function(){
console.log("from listAItem");
// on click and using back button woks fine
},
listViewIt:function(){
new listView();
// on click and using back button woks fine
}
});
Backbone.history.start(); // removed and updated to where i call my app...
return appRouter;
})
Now i updated my Backbone.history to call after initiating my app.. now my initial method (defual view called) but still while i use my back / font buttons in my browser not working.. but reset are works fine..
how to fix it..
here is my updated code:
$.when.apply(null,requests).done(function(){
var app = new router();
//on refresh works, but not working while use back / front button of browser use.
Backbone.history.start();
});
It works...
It was my mistake to other view to set the initial element removed. now i realized that. now works fine. thank for all..
update code :
this.$el.find("ul").html("<h1>New html has to come here</h1>");
it was been wrongly as:
this.$el.html("<h1>New html has to come here</h1>");
Related
I am using angularjs for my app. It contains a newsfeed. If user needs to view the particular news, he has to click on that particular news and it will redirect to that news. And after viewing the particular news, if user wants to go back to news feed(previous page), he has to click on the browser back button. So, in this case, if user clicks on the browser back button, the newsfeed page is reloading again. But, I dont want like this. I want to disable the reload and take the user to the place where he was before. I browsed a lot on this issue, but there was no absolute solution given. Please, help me out.
When you go back, previous route will be triggered and data will be reloaded. If you want to prevent reloading, place a service in between and cache the data.
$routeProvider.
when('/loadFeeds',{
controller:'LoadFeedCtrl',
templateUrl:'pages/feeds.html',
resolve:{
initData : function(FeedService){
return $q.all(
{
data: FeedService.load()
}
);
}
}
})
And in your FeedService, instead of making http call try to see the data is already available
.service('FeedService',function($q,$timeoute){
this.feeds=[];
this.load = function(){
var deferred = $q.defer();
$timeout(function(){
if(feeds.length===0){
this.feeds.push({title:'First','id':1})
this.feeds.push({title:'Second','id':2})
this.feeds.push({title:'Third','id':3})
this.feeds.push({title:'Fourth','id':4})
}
deferred.resolve(this.feeds);
},2000);
return deferred.promise;
};
})
The timeout service could be replaced with $http or $resource. I used the timeout to simulate the delay
you can take an anchor link and on click event of anchor call this
javascript function
window.window.history.back();
here is the html code for it
<input type="button" id="alnkBack" onclick="window.window.history.back();" value="Back" class="button" />
In our app, we actually have two Backbone SPA applications. The first one is for login, registration and other features for unauthenticated users. The URL for this would be something like http://www.example.com/registration#signin. Once you login, you are redirected to our main Backbone app at http://www.example.com/ui#home.
In my main UI app, I am using Backbone.history without pushState. The App file looks something like:
define(function (require) {
var App = new Marionette.Application();
App.addInitializer(function (options) {
...
});
...
App.on('initialize:after', function () {
$(function(){
if (Backbone.history) {
Backbone.history.start({ root: '/ui' });
}
});
$.log("**WebApp**: Marionette app started.");
});
return App;
});
Of course, everything works flawlessly in any browser except IE 9 (and maybe 10, I need to check). In IE 9, all the routing works fine. Clicking links such as http://www.example.com/ui#anotherpage works. However, when the user clicks the Back button in their browser, they are not sent back to the last route fired. Instead, they are sent to http://www.example.com/registration#signin, which is the last page served by Node, our web server. As I click through links, I can see that history.length and Backbone.history.history.length are not updating.
All routes are fired from links/URL's. I'm not using router.navigate() within the code. Here are examples of our Router:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.AppRouter.extend({
appRoutes: {
"": "showHome",
"home": "showHome",
"foo": "showFoo"
}
});
});
And Controller:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.Controller.extend({
showHome: function () {
require(['webapp','modules/home'], function (WebApp) {
WebApp.module("Home").start();
WebApp.module("Home").controller.showModule();
});
},
showFoo: function () {
require(['webapp', 'modules/foo'], function (WebApp) {
WebApp.module("Foo").start();
WebApp.module("Foo").controller.showModule();
});
}
});
});
UPDATE:
On further research, it turns out the problem is that older versions of IE don't record hash changes in their history. See - Change location.hash and then press Back button - IE behaves differently from other browsers. But I'm still not sure what the workaround for this would be. I'm guessing it would somehow involve manually handling hash change events with a plugin such as jQuery Hashchange and doing... something? Manually setting IE's history? Or crafting a custom history object and using it when we detect a Back button in IE?
I was having the same problem in one of our apps for IE.
Starting backbone history like below works.
Backbone.history.start({
pushState: true,
hashChange: false
});
Update: As mentioned By T Nguyen,
When you set pushState to true, hash URL's no longer trigger routes. Unless you add server-side support for all your Backbone routes, you need to add an event handler on the client side which captures appropriate links and calls .navigate() on the route
I need to open a backbone template in a new window. Is this possible? Currently I've got a template that is being displayed within a div but I need this content to display in a new window? I thought using a route might be the way to go but I'm not sure.
I'm a noob to backbone so there's probably a better way to do this.
In my view I've got:
events:
{
'click #active-bets' : 'loadActiveBetsPage',
}
loadActiveBetsPage: function(e)
{
var MyApp = new Backbone.Router();
MyApp.navigate('activebets', {trigger: true});
// , {trigger: true, target: "_blank"}
},
I thought I might get lucky and be able to pass a target: "_blank" parameter here.
in my routes sections:
var AppRouter = Backbone.Router.extend({
routes: {
":activebets" : "renderActiveBets",
"*actions" : "defaultRoute"
} });
app_router.on('route:renderActiveBets', function () {
$this.activeBetsView = new ActiveBetsView( { el: $this.elAccountInfo });
$this.activeBetsView.render();
/* thought something like this might help possibly
if ($(event.currentTarget).prop('target') === '_blank') {
return true;
}
*/
});`
Thank you in advance for any help on this one.
No, this is not possible and especially not with the Backbone Router directly.
The only ways to open new browser windows from a webpage are using the window.open javascript method. It will open a new browser window that directs to the URL specified. Note that the the page you have created and the page you started at are independent of each other and there is no way to communicate between them via javascript.
The other way is to have an anchor tag with the target -attribute, which results in clicking the link opening a new window/tab.
What you can do:
Use a dialog created with html to simulate a new window, e.g. jQuery UI Dialog
Create a separate webpage to display this information, open a new browser window and direct the new window to this webpage.
Update based on last comment:
"...there is no way to communicate between them via javascript."
Since HTML5, the solution for this is HTML5 Web Storage.
window.localStorage
is API that can communicate with all open tabs and windows in browser.
I'm working with trigger and backbone, and am trying to programmatically navigate to a url. This is all happening using the file:// protocol, as everything in running inside trigger io only.
This manual navigate though doesn't trigger the function associated with the route.
My router looks like this
var BARouter = Backbone.Router.extend({
routes: {
"users/sign_in": "userSignin",
"users/sign_up": "userSignup",
"": "catchAll"
},
userSignin: function(){
},
userSignup: function(){
forge.logging.info("in user signup----");
},
catchAll: function(){
}
});
var app_router = new BARouter();
BA.router = app_router;
Backbone.history.start({pushState: true});
and I'm manually navigating
BA.router.navigate(navigate_to("users/sign_up"), {trigger:true});
The navigate_to method just returns the full url in the form "file://users/sign_up".
But nothing is logged to the console, and the execution flows normally. Am I missing something here ?
Using pushState with file urls probably doesn't make sense, I'm also not sure why you need the navigate_to function.
Try setting pushState to false and navigate using the string of the route, i.e.:
BA.router.navigate("users/sign_up", {trigger:true});
Hello here is my scenario.
I have these routes
routes: {
"": "show_group_list",
"!/group/:_id/": "show_group",
},
and here is my navigate function:
App.app.navigate('!/group/'+group.get('_id')+'/', { trigger: true });
when the function is triggered, on the address bar it shows localhost/group/1 instead of localhost/#!/group/1. The problem is that when I refresh the page I don't get the initial page anymore (mine is a single page app)
How can I hack navigate() so that it keeps the hashtag?
Ok, This was easy, I had pushState enabled. Disable pushState and you'll have back the hash