从骨干集合中的两个不同url填充数据

Posted 2021-05-06

我有一个Marionette.LayoutView，它调用主干集合并获取数据并根据响应进行渲染。现在，我面临的问题是，此集合需要从两个不同的端点获取数据，这两个端点应该是独立的，然后返回合并的结果。下面是我的代码：

我的Marionette.LayoutView

var View = Marionette.LayoutView.extend({

    template: _.template(some.html),

    regions: {
        div1: '[data-region="div1"]',
        div2: '[data-region="div2"]',
    },

    initialize: function () {
        this.collection = new MovieCollection();
    },

    onRender: function () {
        if (this.collection.length) {
            this.div1.show(new TopMoviesByLikesView({
                collection: this.collection,
                movieCount: 10,
            }));

            this.div2.show(new TopMovieByRatingsView({
                collection: this.collection,
                movieCount: 10,
            }));
        }
    },

});

module.exports = AsyncView.extend({
    ViewConstructor: View,
});

我的Collection

module.exports = Backbone.Collection.extend({

    model: TopMovieModel,

    initialize: function (response) {
        let movieCollection = [];
            let movieSourceOne = new TopMovieFromSourceOne();
            movieSourceOne.fetch({
                success: function (collection, response) {
                    movieCollection = [...movieCollection, ...response.data];
                },
                error: function (collection, response, options) {
                    console.info('~ Response::ERROR', collection, response, options);
                }
            });
        let movieSourceTwo = new movieSourceTwo();
        movieSourceTwo.fetch({
            success: function (collection, response, options) {
                movieCollection = [...movieCollection, ...response.data];
            },
            error: function(collection, response, options) {
                console.info('~ Response::ERROR', collection, response, options);
            }
        });
        this.collection = movieCollection;
    },

我得到的错误是A “url” property or function must be specified有没有一种方法可以在不使用主干集合中使用url的情况下执行此操作？注意：我想使两个端点保持独立，因为我不希望在主API失败时集合也会失败。

答案

为了避免url出现此错误，您应该重写fetch方法，以同时调用两个集合fetch。

function promisifyFetch(collection) {
  return new Promise(function(resolve, reject) {
    collection.fetch({
      success() {
        resolve(collection);
      },

      error() {
        reject();
      }
    });
  });
}

module.exports = Backbone.Collection.extend({
  model: TopMovieModel,

  initialize() {
    this.movieSourceOne = new TopMovieFromSourceOne();
    this.movieSourceTwo = new movieSourceTwo();
  },

  fetch(options) {
    return Promise.all([
      promisifyFetch(this.movieSourceOne),
      promisifyFetch(this.movieSourceTwo)
    ]).then(([one, two]) => {
      const response = [
        ...one.toJSON(),
        ...two.toJSON()
      ];

      this.set(response, options);
      this.trigger('sync', this, response, options);
    });
  }
});

您可能还要在这里处理错误。