jtara
commented
9 years ago I haven't tried it with Backbone, and make no representation that it is compatible. I'm afraid I know nothing about Backbone.
Only suggestion I can make it to try to load the plugin as early as possible. I don't know why you are fiddling with wrapper height, as the plugin already does that for you. What's a "subview"?
Closing this Issue, because Backbone is not supported. Feel free to add any comments that might help others, though.
I am developing an APP with JQM 1.4.3 and Backbone 1.0. I have implemented the Iscrollview with the PullDown functionality.
The problem I am having is that I can see the $scroller moving up during the page transition. It seems like the widget is taking longer than the transition start to set up the $scroller.
I have tried everything i could think of, from manipulating the css to delaying the transition, but nothing works fine. I also looked for similar problems on the internet but couldnt find anything related to my problem. Here is a bit of my code:
The Router app.routers.Router = Backbone.Router.extend({ routes:{ "oportunidades":"oportunidades", }, initialize:function(){}, oportunidades:function(){ var self = this; this.before(function(){ var render = false; if(!app.oportunidadespage){ app.oportunidadespage = new app.views.Oportunidadespage(); render = true;
}else{ app.oportunidadespage.delegateEvents(); } self.changepage(app.oportunidadespage, render); }); }, before:function(callback){ var self = this; if(self.appLoaded){ if(callback) callback(); } else{ //load app assets if(callback) callback(); } }, changepage:function(view, render){ var self = app.router; self.currentView = view; if(render){ view.render(); $('#pages-holder').append($(view.el)); } var transition = $.mobile.defaultPageTransition; $('body').pagecontainer('change', $(view.el), {changeHash:false, transition: self.back ? transition : transition, reverse: self.back}); self.back = false; } });
Here is one of the Views where I load Iscrollview app.views.Oportunidadespage = Backbone.View.extend({ id:'oportunidadespage', attributes:{ 'data-role':'page', 'data-title':'Oportunidades', }, events:{}, initialize:function(){ this.iscrollview; var scrollwrapper = '#'+this.id+' .ui-content'; var self = this; $(document).on('iscroll_onpulldown', scrollwrapper, function(e, data){ self.onPullDown(e, data); }); }, render:function(){ this.$el.html(this.template()); this.$el.trigger('create'); this.fixdimensions(); return this; }, fetchContent:function(){ //this function is called from the router after page transition //this is where I fetch content from the server this.renderContent(); }, updateScroll:function(){ //I call this method from the subviews var self = this; if(this.iscrollview){ setTimeout(function(){ self.iscrollview.refresh(); },10); } }, onPullDown:function(e, data){ //same as fetchContent }, renderContent:function(){ if(this.iscrollview == null){ this.iscrollview = $('.iscroll-wrapper', this.el).data('mobileIscrollview'); } //render Subviews }, fixdimensions:function(){ var $wrapper = $('.ui-content', this.el); var wrapperheight = Math.floor($(window).height() - ($('#mainheader').outerHeight() + $('#mainfooter').outerHeight())); $wrapper.height(wrapperheight); }, beforeClose:function(){} });
Any help would be very much appreciated! Thank you so much..