Question

我创建了一个小型演示，其中实例化骨干视图并使用this.$el.jScrollPane()，附加jScrollPane。

5秒后重新渲染视图时，jScrollPane消失。谁知道为什么？

这里我复制了js：

var ScrollableView = Backbone.View.extend({
  initialize: function() {
    this.render();
  },

  render: function () {
    this.$el.html(_.template($('#scrollable_template').html(), {})); 
    this.$el.jScrollPane();
    return this;
  }
});

$(function () {
  var scrollableView = new ScrollableView({ el: $('#scrollable') });
  setTimeout(function() {
    scrollableView.render();
    console.log("re-rendered");
  }, 5000);
});

Answer 1

当您致电this.$el.jScrollPane()时，插件会执行此操作：

return this.each(
    function()  
    {
        var elem = $(this), jspApi = elem.data('jsp'); 
        if (jspApi) {
            jspApi.reinitialise(settings); 
        } else {
            jspApi = new JScrollPane(elem, settings); 
            elem.data('jsp', jspApi);  
        }
    }   
);

记下elem.data('jsp')检查，这意味着.jScrollPane()第二次在元素上调用它时会做出不同的事情。

执行此操作时：

this.$el.html(_.template($('#scrollable_template').html(), {}));

您删除了第一个.jScrollPane()调用添加的所有额外元素和事件处理程序。然后再次调用.jScrollPane()，它会看到.data('jsp')在那里，所以它可能假设所有内容都已存在并且没有正确设置。

jScrollPane API中有一个destroy方法，但我无法使其工作。手动删除jsp数据似乎确实有效：

render: function () {
  this.$el.removeData('jsp');
  this.$el.html(_.template($('#scrollable_template').html(), {})); 
  this.$el.jScrollPane();
  return this;
}

但老实说，我不知道是否会做一些令人讨厌的事情;我会更多地处理它并尝试让destroy工作，然后在绝望中做removeDate('jsp')。

Answer 2

您应该在[{1}}骨干网视图方法和jscollpane方法initialize() render() reinitialze()方法中实例化jscrollpane。

Answer 3

我使用它来制作一个MarionetteJS CollectionView，它正在我的布局区域中渲染，并且最初遇到了与原始问题类似的困难。

基于这里的一些注释，我能够使这个工作用于CollectionView而不仅仅是一个单独的ItemView。这是：

// On the first render, apply the scrollers.
PlaylistTracks.on( 'show', function() {
$( '.ap-track-list' ).jScrollPane();    
});

// For when it's updated (this app includes paging, so this is frequent)
PlaylistTracks.on( 'render', function() {
    $( '.ap-track-list' ).jScrollPane();    
});

// .destroy() was also buggy for me, actually destroying the view. Use this
// Use removeData instead and manually remove elements for scroller
PlaylistTracks.on( 'before:render', function() {
    PlaylistTracks.$el.removeData('jsp').removeClass( 'jspScrollable' );
    PlaylistTracks.$('.jspContainer').remove();
});

现在它没有任何困难地工作。如果有人再次寻找这个，希望这会有所帮助：）

backbone.js + jScrollPane：在重新渲染时保持滚动窗格？

3 个答案: