I've got a web application written in backbone.js. Say I have a page of search results and the user is scrolled to the bottom of the search results. The user clicks on the last search result, and the page is displayed for that result.
I want to support back button, and when the user clicks "back", the router kicks in and redisplays the search page. Problem is when the search page is re-rendered , its scrolled to the top again.
What is the best way to restore the results to the original position?
Consider tracking the scroll position in the view. Then on a render or let the route change position the page
View = Backbone.View.extend({
initialize: function () {
var self = this;
$( window ).on( 'scroll', function () {
self.position = this.pageYOffset;
});
},
render: function () {
// render code
if ( this.position ) {
window.scrollBy( 0, this.position );
}
}
});
Related
I have an Ionic App where from side menu click it will go to page A and from there on certain action it will go to Page B and I need back button on all the pages which will navigate it back to mobile app.
I tried this code
$scope.goOut= function () {
//$scope.showLoading($ionicLoading);
var url = "https://www.google.com";
var target = '_blank';
var options = ['location=no','hardwareback=yes','toolbarposition=top', 'toolbar=yes','enableViewportScale=yes',
'transitionstyle=fliphorizontal',
'closebuttoncaption=Back to the App'];
var ref = cordova.InAppBrowser.open(url, target, options.join());
ref.addEventListener("loadstop",function () {
$scope.hide($ionicLoading);
});
};
But this is not showing me anything on the inappbrowser.
I must be doing something horribly wrong? and its not even showing loading?
I have 2 states. A home state and a child of the home state called, suggestions. The home state loads a template into a ui-view element.
Inside my home template, and my suggestions template I have this link,
.addmovie{"ng-click" => "addMovie(movie)"}
This link fires the .addMovie function. This places a new value in my database and after that's done reloads all the data with this,
var init = function(){
movieService.loadMovies().then(function(response) {
$scope.movies = response.data;
var orderBy = $filter('orderBy');
$scope.orderedMovies = orderBy($scope.movies, "release_date", false);
var movies = $scope.orderedMovies
var i,j,temparray,chunk = 8, movieGroups=[];
for (i=0,j=movies.length; i<j; i+=chunk) {
temparray = movies.slice(i,i+chunk);
movieGroups.push(temparray);
}
$scope.movieGroups = movieGroups
})
$(".search_results").fadeOut(250);
$('body').find('#search_input').val("");
movieTrailers.loadTrailers().then(function(response) {
$scope.trailers = response.data;
})
movieSuggestions.loadSuggestions().then(function(response) {
$scope.suggestions = response.data;
})
console.log ('init end')
}
So if I add a movie from within my home template, the view updates with the new data.
In this home template I also have a button that loads the suggestions state,
#suggestions
%a{"ui-sref" => ".suggestions"}
%h1
Suggestions
%div{"ui-view" => "suggestions"}
This loads the suggestions template inside the suggestions view inside the home state.
In my suggestions template I have the same button as in the home state.
.addmovie{"ng-click" => "addMovie(movie)"}
And when I click that it does do the addMovie function because I get the console logs in my console, and also it reloads all the data (with use of the init function) because when I check the network tab and view the movies.json it has the new data. But it does not update my home template view. To see the new data in my home template I have to refresh the page.
Short description of my program and finally the problem:
I have got two pages. The first page list products in rows with a short description. If you click on one you will land on a detail page.
The detail page lists the product details and underneath a couple of related products. If you click on one of the releated products the same page is rendered again with the new information fetched from a REST interface.
If I want to use the browser-back-button or the own back-button to get to the previous product-detail-page a blank page appears. This only happens on my iPad. Using Chrome on a desktop browser works fine. I debugged the application and I figured out, that the backbonejs route is never called. I have no idea why.
Here is my code of the details page:
define([
"jquery",
"lib/backbone",
"lib/text!/de/productDetails.html"
],
function(
$,
Backbone,
ContentTemplate
){
var PageView = Backbone.View.extend({
// product details template
template: _.template(ContentTemplate),
// back-button clicked
events:{
'click a#ac-back-button':'backInHistory',
},
// init
initialize: function(options){
this.options=options;
// bind functions
_.bindAll(this,
'render',
'renderRelatedSeriePlainproduct',
'backInHistory'
);
// listen for collection
this.listenTo(this.options.relatedCollectionPlainproduct, 'reset',this.renderRelatedSeriePlainproduct);
},
// back button
backInHistory: function(e){
e.preventDefault();
window.history.back();
},
// render template
render: function(){
// render template
this.$el.html(this.template(this.model.models[0].attributes));
return this;
},
// render related products
renderRelatedSeriePlainproduct: function (){
var models = this.options.relatedCollectionPlainproduct.models;
if(models.length==0){
$('.ac-plainproduct').hide();
} else{
var elem = $('#ac-related-listing-plainproduct');
var ct="";
ct+='<ul id="ac-list-related-plainproduct">';
$.each(models, function(key, value){
ct+='<li>';
ct+='<a href="index.html?article_id='+value.get('article_id')+'&type='+value.get('type')+'&serie='+value.get('series')+'#product-detail">Link';
ct+='</a>';
ct+='</li>';
});
ct+='</ul>';
elem.append(ct);
}
}
});
// Returns the View class
return PageView;
});
I follow one of the links from renderRelatedSeriePlainproduct.If I click on the back button on the new page the backInHistory function is called, but the window.history.back(); does not call the backbone router.
Maybe the problem is the #hash in the URL, that is not changed during page transition. But this would not explain, why it works perfectly with my Chrome on my desktop machine. For me it seemed to be a problem of asynchronous calls but even there I could not find a problem.
Maybe it helps to list my router code as well. First of all I was thinking it is an zombie issue in backbone, but I remove all events and views while making the transition.
// function called by the route
// details page
productdetail: function() {
$.mobile.loading("show");
_self = this;
// lazy loading
require([
'collection/ProductDetailCollection',
'collection/RelatedCollection',
'view/ProductDetailView'
],
function(ProductDetailCollection, RelatedCollection, ProductDetailView){
// get URL parameters
var articleID = _self.URLParameter('article_id');
var type = _self.URLParameter('type');
var serie = _self.URLParameter('serie');
// product - details
var productDetail = new ProductDetailCollection.ProductDetail({id: articleID});
// related products
_self.relatedCollectionPlainproduct = new RelatedCollection({serie:serie, type:"Electronics", article_id:articleID});
// assign binded context
productDetail.fetch({
// data fetched
success: function (data) {
// page transition
_self.changePage(new ProductDetailView({
model:data,
relatedCollectionPlainproduct:_self.relatedCollectionPlainproduct
}));
// fetch data
_self.relatedCollectionPlainproduct.fetch({reset:true});
}
});
});
},
// page transition
changePage:function (page) {
// remove previous page from DOM
this.page && this.page.remove() && this.page.unbind();
// assign
this.page = page;
// assign page tag to DOM
$(page.el).attr('data-role', 'page');
// render template
page.render();
// append template to dom
$('body').append($(page.el));
// set transition
var transition = "fade";
// we want to slide the first page different
if (this.firstPage) {
transition = "fade";
this.firstPage = false;
}
// make transition by jquery mobile
$.mobile.changePage($(page.el), {changeHash:true, transition: transition});
// page was rendered - trigger event
page.trigger('render');
$.mobile.loading("hide");
},
I tried to use allowSamePageTransition but with no success. Maybe someone could give me a hint. Thanks!
Looks like jQuery Mobile and Backbone's routers are conflicting. Take a look here:
http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
Thats not the reason. I disabled the routing of jquery mobile.
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
My single page web application consists of 4-5 views stacked vertically, when a user chooses a menu item, the page will scroll to the appropriate view. When you come into the application for the first time this is not a problem, however if you deep link to a menu item my page throws a fit because it's trying to access properties of an element that does not yet exists.
The problem I am having is understanding why the elements do not exist at the time the router is trying to scroll the page.
If you load / and then select home no problems, but if you directly hit #home via browser that when I get jQuery undefined errors.
Uncaught TypeError: Cannot read property 'top' of undefined
Inside router I am instantiating and rendering all of my views within the initialize function. The idea is the initialize will always happen before any of my routes, clearly not the case.
Again I've read a few threads that show how to have a before and after function for either all routes of individual routes but even using that approach scrollToById fails because it doesn't know what $(id) is at the time of being called.
define(function (require, exports, module) {
var Backbone = require('backbone');
return Backbone.Router.extend({
initialize: function(){
require(['ui/menu/menu','ui/home/home', 'ui/samples/samples', 'ui/resume/resume', 'ui/contact/contact'],
function(Menu, Home, Samples, Resume, Contact){
var menu = new Menu();
menu.render();
var home = new Home();
home.render();
var samples = new Samples();
samples.render();
var resume = new Resume();
resume.render();
var contact = new Contact();
contact.render();
});
},
routes: {
'' : 'init',
'home' : 'home',
'samples' : 'samples',
'resume' : 'resume',
'contact' : 'contact'
},
init: function(){
},
home: function (){
this.scrollToById($(".home-container"));
},
samples: function(){
this.scrollToById($(".samples-container"));
},
resume: function(){
this.scrollToById($(".resume-container"));
},
contact: function(){
this.scrollToById($(".contact-container"));
},
scrollToById: function(id) {
var val = $(id).offset().top - 127;
$('html, body').animate({
scrollTop: val
}, 2000);
}
});
});
Appreciate any tips or advice.
I think the routes event handlers in the router are getting initialized at the same time as the initialize function. Because of this, route events are getting triggered before the DOM elements are rendered.
I would try making a new function outside of Router that contains everything currently inside the initialize function. Then the final thing in that function can be to create an instance of the router. This will ensure that no routes events are called until your scripts and DOM are loaded.
I have a Backbone app. I'm using Backbone.history to enable use of the back button. We have a page (settings) that auto loads a popup requiring input from the user. If the user chooses cancel, I want to go back to the previous page. I can do this using window.history.back().
The problem is, if the user went directly to that page (app#settings) from another url (like google) by typing the url into the browser, I want to redirect the user to the home page (app/) rather than going back to google.
I haven't been able to figure out any way to do this. Backbone.history looks like it store information from the browser's back button, so it has a history even if they just arrived at the app. I also couldn't find a way to view the previous url.
Is this possible?
Wrap the back navigation logic in a method of your own. Perhaps on the router:
var AppRouter = Backbone.Router.extend({
initialize: function() {
this.routesHit = 0;
//keep count of number of routes handled by your application
Backbone.history.on('route', function() { this.routesHit++; }, this);
},
back: function() {
if(this.routesHit > 1) {
//more than one route hit -> user did not land to current page directly
window.history.back();
} else {
//otherwise go to the home page. Use replaceState if available so
//the navigation doesn't create an extra history entry
this.navigate('app/', {trigger:true, replace:true});
}
}
});
And use the router method to navigate back:
appRouter.back();
I used the same answer from jevakallio, but I had the same problem that commenter Jay Kumar had: The routesHit doesn't subtract so hitting appRouter.back() enough times will take the user out of the app, so I added 3 lines:
var AppRouter = Backbone.Router.extend({
initialize: function() {
this.routesHit = 0;
//keep count of number of routes handled by your application
Backbone.history.on('route', function() { this.routesHit++; }, this);
},
back: function() {
if(this.routesHit > 1) {
//more than one route hit -> user did not land to current page directly
this.routesHit = this.routesHit - 2; //Added line: read below
window.history.back();
} else {
//otherwise go to the home page. Use replaceState if available so
//the navigation doesn't create an extra history entry
if(Backbone.history.getFragment() != 'app/') //Added line: read below
this.routesHit = 0; //Added line: read below
this.navigate('app/', {trigger:true, replace:true});
}
}
});
And use the router method to navigate back:
appRouter.back();
Added lines:
1st one: Subtract 2 from routesHit, then when its redirected to the "back" page it'll gain 1 so it's actually like you did just a minus 1.
2nd one: if user is already at "home", there wont be a redirect so don't do anything to routesHit.
3rd one: If user is where he started and is being sent back to "home", set routesHit = 0, then when redirected to "home" routesHit will be 1 again.