Jquery backbone.js+；jScrollPane：是否保持滚动窗格重新渲染？

我创建了一个小的演示，其中一个主干视图被实例化，并使用

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

---

当您调用

this.$el.jScrollPane（）

时，插件会执行此操作：

注意

elem.data（'jsp'）

检查，这意味着

.jScrollPane（）

在第二次对元素调用它时会做一些不同的事情

执行此操作时：

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

删除第一个

.jScrollPane（）

调用添加的所有额外元素和事件处理程序。然后再次调用

.jScrollPane（）

，它会看到

.data（'jsp'）

在那里，因此它可能假设所有内容都已经在那里，并且没有正确设置

jScrollPane API中有一个方法，但我无法让它工作。手动删除

jsp

数据似乎确实有效：

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

---

但老实说，我不知道这是否会造成一些不好的后果；在绝望中执行

removeDate（'jsp'）

之前，我会更麻烦地处理它，并尝试让

destroy

工作。

您应该在主干视图的

initialize（）

方法和

render（）

方法中使用

重新初始化（）实例化
jscollpane

jscrollpane的方法

我在布局的某个区域中渲染了一个木偶Tejs 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();
});

---

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

感谢您抽出时间回答这个模糊的问题

removeData（'jsp'）

确实有效，正如您所说，我也无法让

destroy

正常工作。即使我多次重新实例化滚动窗格，交互也不会太奇怪，因此我将使用您的技巧。@ash:可以，但我无法在您的tinkerbin示例中使其工作。您使用的是旧版本的jScrollPane吗？我正在使用，这是演示页面上使用的版本（并在网站上列出供下载）。奇怪，嗯？这是合乎逻辑的，但不起作用——这就是为什么我要用更糟糕的方法。

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