1

http://tinkerbin.com/pla4NzJ9

我创建了一个小型演示，其中实例化了主干视图并使用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);
});
4

3 回答 3

2

当您调用时，插件会执行此操作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')。

于 2012-05-23T22:54:13.883 回答
0

您应该实例化主干视图的jscollpaneon方法和 in方法的使用方法。initialize()render()reinitialze()jscrollpane

于 2012-05-24T12:04:17.817 回答
0

我将它用于在我的布局区域中呈现的 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();
});

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

于 2014-05-05T06:13:25.227 回答