Question

我正在使用骨干构建图库。用户一次只能查看一个图像，当他使用箭头键导航下一个/上一个图像时，他将在集合中看到下一个图像。

我有一个名为库视图的顶级骨干视图。

GalleryView = Backbone.View.extend({
    initialize: function(options) {
        this.collection = PhotosCollection();
    }
});

然后，对于每个图像，我将创建一个视图

PhotoView = Backbone.View.extend

我将跟踪视图中的当前模型，并为该模型创建photoView。

我的问题是关于分页或预取不在视图中的图像。我不确定galleryView如何能够容纳多个PhotoView，然后显示一个焦点。我正在考虑为整个集合构建一个长div，然后在索引位置为每张照片添加div。添加从该div中删除新图像的策略是什么。

Answer 1

<强>更新

我修改了原始代码。虽然这显然未经测试，但它应该给你一个合理的开始。只要创建img元素并且已设置src属性（as mentioned here），图像就会开始预加载。它们不必附加到DOM。我在下面包含的这个改版版本将根据paginationPadding变量在当前图像之前和之后预加载图像。

结束更新

在Backbone中处理事物时，有助于将所有与状态相关的信息保存在模型中，然后让UI响应它。在这种情况下，您只需跟踪要在模型中显示的图像，然后根据模型中的更改跟踪您要查看的照片，您只需重新渲染照片库即可显示所需的图像图片。这是反应性的。

这是一个粗略的实现，但希望能让您了解如何实现一个库，您可以点击这样的照片。当然，你仍然有一堆CSS等等。它不完整。如果您有任何问题，请告诉我。

var StateModel = Backbone.Model.extend({
  defaults: {
    visibleImage: 0
  },

  initialize: function(attributes, options) {
    this.photoCollection = options.photoCollection;
  },

  setIndex: function(photoIndex) {
    if(!this.photoCollection.length) return;

    if(photoIndex < 0) {
      photoIndex = this.photoCollection.length - 1;
    } else if(photoIndex >= this.photoCollection.length) {
      photoIndex = 0;
    }

    this.set('visibleImage', photoIndex);
  },

  setPrev: function() {
    this.setIndex(this.get('visibleImage') - 1);
  },

  setNext: function() {
    this.setIndex(this.get('visibleImage') + 1);
  }
});

var PhotoControls = Backbone.View.extend({
  tagName: 'div',

  initialize: function(options) {
    this.stateModel = options.stateModel;
    this.paginationPadding = options.paginationPadding;
  },

  render: function() {
    var that = this;
    this.$el.empty();

    var ctrlStyle = {cursor: 'pointer', display: 'inline-block', padding: '5px 10px', margin: '0px 5px', border: '1px solid #000'};

    this.$el.append($('<div><< Previous</div>')
      .css(ctrlStyle))
      .click(function() {
        that.stateModel.setNext();
      });

    // Display numbers
    var visibleImage = this.stateModel.get('visibleImage');
    var pgStart = Math.max(visibleImage - this.paginationPadding, 0);
    var pgEnd = Math.min(visibleImage + this.paginationPadding, this.stateModel.photoCollection.length - 1);
    for(var i = pgStart; i <= pgEnd; i++) {
      var $numEl = that.$el.append(
        $('<div>' + (i + 1) + '</div>')
          .css(ctrlStyle)
          .click(function() {
            that.stateModel.setIndex(i);
          });

        if(i == visibleImage) {
          $numEl.css({fontWeight: 'bold', textDecoration: 'underline'});
        }
      );
    }

    this.$el.$('<div>Next >></div>')
      .css(ctrlStyle))
      .click(function() {
        that.stateModel.setPrev();
      });

    return this;
  }
});

var PhotoView = Backbone.View.extend({
  render: function() {
    this.$el.html('<img src="' + this.model.get('url') + '" />');

    return this;
  }
});

var GalleryView = Backbone.View.extend({
  tagName: 'div',

  initialize: function(options) {
    this.paginationPadding = 2;

    this.collection = PhotosCollection();
    this.renderedViews = {};
    this.state = new StateModel(null, {photoCollection: this.collection});
    this.photoControls = new PhotoControls({
      stateModel: this.state,
      paginationPadding: this.paginationPadding
    }).render();
  },

  render: function() {
    if(this.photoView) {
      this.photoView.remove();
    }

    // Pre-fetch images before and after current one based on pagination padding
    var visibleImage = this.stateModel.get('visibleImage');
    var pgStart = Math.max(visibleImage - this.paginationPadding, 0);
    var pgEnd = Math.min(visibleImage + this.paginationPadding, this.stateModel.photoCollection.length - 1);

    for(var i = pgStart; i <= pgEnd; i++) {
      if(!this.renderedViews[fetchModel.cid]) {
        // Images will begin fetching as soon as the 'src' attribute is set on the 'img' element rendered by the view
        this.renderedViews[model.cid] = new PhotoView(this.collection.at(i));
        this.renderedViews[model.cid].render();
      }
      this.$el.html(this.photoView.render().el);
    }

    // Attach the view for the current image
    var renderModel = this.collection.at(this.state.get('visibleImage'));
    if(renderModel && this.renderedViews[renderModel.cid]) {
      this.photoView = this.renderedViews[renderModel.cid];
      this.$el.html(this.photoView.el);
    }

    this.$el.append(this.photoControls.el);

    return this;
  }
});

Answer 2

我不确定galleryView如何能够容纳多个PhotoView，然后显示一个焦点。

这很容易。只要视图没有附加到DOM它保持不可见，您可以实例化您想要的多个视图，并且只能随时附加其中一个。

我正在考虑为整个集合构建一个长div，然后在索引位置为每张照片添加div。添加从该div中删除新图像的策略是什么。

无论如何，如果你想预先加载图片，我认为下一个就足够了，你真的不需要删除PhotoViews，只要它们不是荒谬的数字照片，只是将它们滚出视图或隐藏它们，如果你想实际删除视图，请调用remove（）。

Javascript：用骨干构建图库

2 个答案: