Backbone.js Pinterest模态

时间:2014-09-29 07:32:33

标签: javascript jquery backbone.js pinterest

我正在使用backbone.js构建我的前端。 所以我想做的是,在“灯箱”中渲染视图(与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)。单击项目时打开此项目详细信息:

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

但是,这种方法存在一些问题:

  1. 当itemWrapperItem2出现时(放大时就像Pinterest上的图钉一样),有两个滚动条。一个用于后台的itemStream,另一个用于灯箱。

  2. itemDetailsView还生成一个itemStream。当我点击某个项目时,它会再次加载到itemDetailsBoxView中,并且还会推送网址(相同的功能,当你打开一个引脚并再次点击一个引脚时)。这意味着,当我想回到原来的itemStream时,我遇到了问题,因为我不知道URL。

  3. 还有更多 - 但这足以看出,这种做法并不好。所以你知道backbone.js的解决方案是复制整个pinterest“放大引脚”的功能(包括你在重新加载引脚时登陆另一页)。

    这是我在这里发表的第一篇文章 - 如果这篇文章的描述较少,请保持温和:)

0 个答案:

没有答案