2

I am trying to use iScroll4 inside a backbone.js application. I have several dynamically loaded lists, and I want to initialize iScroll after the appropriate view has loaded.

I'm trying to call 'new iScroll' when the list view finishes loading, but cannot for the life of me figure out how to do this.

Has anyone gotten these two to work together? Is there an example out there of a backbone view initializing a scroller once its element has loaded?

user1265102
  • 21
  • 2
  • Can't you initialize iScroll on the view before the content is loaded? If I'm not mistaken, I believe that iScroll is attached to the parent element, so any data added would scroll. – RestingRobot Mar 12 '12 at 20:58
  • When I do that, I get this weird "rubber band" effect where the list moves a bit, but won't scroll. I believe it needs to load first so the library knows the height of the element. Either that, or I'm not properly initializing iScroll in the view. I couldn't find online examples of how to do that. – user1265102 Mar 12 '12 at 23:45
  • I see. After reading through the iScroll documentation, it seems like the width and height both need to be set at initialization. Kind of makes the whole plugin less useful if you ask me. Sander's solution appears to be the only way, (setting a callback when the view is loaded, then initializing iScroll). – RestingRobot Mar 13 '12 at 17:36

1 Answers1

7

you are correct, you have to load the view first, or defenately refresh iscroll afterwards

in our applications, we usually use the render method to render the view and have a postRender method that handles initialization of these extra plugins like iscroll

of course you need some manual work to get it done but this is the gist of it:

var myView = Backbone.View.extend({

    // more functions go here, like initialize and stuff... but I left them out because only render & postRender are important for this topic

    // lets say we have a render method like this:
    render: function() {            
        var data = this.collection.toJSON();
        this.$el.html(Handlebars.templates['spotlightCarousel.tmpl'](data));
        return this;
    },

    // we added the postRender ourself:
    postRender: function() {            
        var noOfSlides = this.collection.size(); 
        $('#carouselscroller').width(noOfSlides * 320);

        this.scroller = new IScroll('carouselwrapper', {
            snap: true,
            momentum: false,
            hScrollbar: false
        });
    }

});

now the calling of these methods we did this outside our view as we like some view manager to handle this but it boils down to this

    var col = new myCollection();
    var view = new myView({ collection: col });

    $('#wrapper').html(view.render().$el); // this chaining is only possible due to the render function returning the whole view again.

    // here we always test if the view has a postRender function... if so, we call it
    if (view.postRender) {
        view.postRender();
    }
Sander
  • 13,301
  • 15
  • 72
  • 97
  • I can't load iscroll on my application. I'm using backbone, underscore and require js. i have this code. var scroller = new iScroll('itemcontainer'); it says iScroll is not a constructor. any ideas? – n0minal Apr 03 '12 at 02:39