Javascript Backbone.js Pinterest模式

Javascript Backbone.js Pinterest模式,javascript,jquery,backbone.js,pinterest,Javascript,Jquery,Backbone.js,Pinterest,我正在使用backbone.js构建我的前端。 所以我想做的是,在“lightbox”(与pinterest相同)中渲染视图。 我这样试过: var itemDetailsBoxView = CloseableView.extend({ el: '#itemwrapperItemBox #itemwrapperItem2', initialize: function(options) { var self = this; self.render(options); }, rend

我正在使用backbone.js构建我的前端。 所以我想做的是,在“lightbox”(与pinterest相同)中渲染视图。 我这样试过:

var itemDetailsBoxView = CloseableView.extend({
el: '#itemwrapperItemBox #itemwrapperItem2',
initialize: function(options) {
    var self = this;
    self.render(options);
},
render: function(options) {
    $('#itemwrapperItemBox').fadeIn(300);
    var self = this;
    app._itemDetailsView = new itemDetailsView({id: options.id, el: '#itemwrapperItemBox #itemwrapperItem2'});
    self.rendered(app._itemDetailsView);
},
events: {
    'keydown': 'keydownHandler'
},
keydownHandler: function(e) {
    switch (e.which) {
        // esc
        case 27 :
            $('#itemwrapperItemBox').hide();
            break;

    }
}
此视图仅在灯箱中打开另一个视图(itemDetailsView)。单击某个项目时,会打开此ItemDetailsBox视图:

 itemDetails: function(events) {
    var self = this;
    var that = $(events.currentTarget).parents('.item');
    var id = that.find('.covercontainer').find('img').data('id');
    if (app._itemDetailsBox) {
        app._itemDetailsBox.close();
    }
    app._itemDetailsBox = new itemDetailsBoxView({id: id});
    self.rendered(app._itemDetailsBox);
    app.navigate("/collage/" + id, false);
},
然而,这种方法存在几个问题:

  • 当itemWrapperItem2出现时(如放大时Pinterest上的pin),有两个滚动条。一个用于背景中的itemStream,另一个用于lightbox

  • itemDetailsView还生成一个itemStream。当我在某个项目上单击时,它会再次加载itemDetailsBoxView并推送url(当您打开pin并再次单击pin时,功能相同)。这意味着,当我想返回到原始的itemStream时,我会遇到一个问题,因为我不知道URL

  • 还有更多——但这足以说明,这种方法并不奏效。那么,您知道backbone.js复制整个pinterest“放大pin”功能的解决方案吗(包括重新加载pin时登录到另一个页面)

    这是我在这里的第一篇文章-如果这篇文章的描述要少一些,请温柔一点:)