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) check, 这意味着 .jScrollPane() 在您第二次调用元素时会做不同的事情。

当你这样做时:

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

您删除了第一个 .jScrollPane () 呼叫中添加的所有额外元素和事件处理器。然后您又拨打 .jscrollPane () , 它看到 .data(jsp) 已经存在, 所以它可能假设一切都已经存在, 并且没有正确设置。

在 jScrollPane API 中存在 < a href= > 的方法, http://jscrollpane.kelvinluck.com/api.html#destroy" rel="nofollow"\\\ code > destroy 方法, 但我无法成功。手动删除 < code> jsp 数据似乎有效 :

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

但我真的不知道这会不会做一些下流的事情;我更会乱来,试图让 destroy 工作,然后从绝望中跳出 reveDate(jsp) 。

Answer 2

在主干视图的 初始化方法() 和 render () 方法使用 re remolize () 方法使用 jscolpane 方法 上,您应该立即采用初始化方法() 方法。

Answer 3

我用这个来制作一个 MarionetteJS CrowningView, 它正在我布局的某个区域制作, 最初遇到了与最初的问题相似的困难。

根据这里的一些笔记,我得以为《收藏观察》,而不仅仅是单个的《项目观察》工作。以下是:

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

现在它毫无困难地工作了。希望如果有人再寻找这个,这有帮助。 )

友情链接