backbone.js - 无法让 iscroll4 与主干 View 一起播放

Question

我正在尝试在backbone.js应用程序中使用iScroll4。我有几个动态加载的列表，我想在加载适当的 View 后初始化 iScroll。

当 ListView 加载完成时，我尝试调用“new iScroll”，但我无法弄清楚如何执行此操作。

有人让这两个一起工作吗？是否有一个主干 View 在其元素加载后初始化滚动条的示例？

Answer 1

你是对的，你必须先加载 View ，或者随后刷新 iscroll

在我们的应用中，我们通常使用render方法来渲染 View 并有一个 postRender 方法来处理这些额外插件的初始化，例如 iscroll

当然，您需要一些手动工作来完成它，但这就是它的要点:

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

});

现在调用这些方法我们在我们的 View 之外执行此操作，因为我们喜欢一些 View 管理器来处理此问题但归结起来就是这样

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