backbone.js - iscroll4 をバックボーン ビューで再生できません

Question

backbone.js アプリケーション内で iScroll4 を使用しようとしています。動的にロードされたリストがいくつかあり、適切なビューがロードされた後に iScroll を初期化したいと考えています。

リストビューの読み込みが完了したら「new iScroll」を呼び出そうとしていますが、これを行う方法を理解することはできません。

この2つを連携させた人はいますか？要素がロードされたら、スクローラーを初期化するバックボーン ビューの例はありますか?

Answer 1

あなたは正しいです。最初にビューをロードするか、後で iscroll を確実に更新する必要があります

私たちのアプリケーションでは、通常 render メソッドを使用してビューをレンダリングし、iscroll などのこれらの追加プラグインの初期化を処理する postRender メソッドを持っています。

もちろん、それを行うには手作業が必要ですが、これがその要点です。

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
        });
    }

});

これらのメソッドの呼び出しは、ビューマネージャーがこれを処理するのが好きなので、ビューの外でこれを行いましたが、これに要約されます

    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();
    }