javascript - 单一主干 View 中的多个集合

Question

我正在编写一个主干应用程序，它执行 OLS 回归并从两个不同集合中的两个不同 JSON 中提取数据。

var Ads_Per_Day = Backbone.Collection.extend({
    model: DataModel,
    url: 'assets/ads_per_day.json'
  });
var ads_per_day = new Ads_Per_Day()
  ads_per_day.fetch({
    reset:true
  });

var Age_Per_Day = Backbone.Collection.extend({
    model: DataModel,
    url: 'assets/age_all.json'
  });
var age_per_day = new Age_Per_Day()
  ads_per_day.fetch({
    reset:true
  });

我尝试使用以下方法将两个保存 JSON 的集合包含在一个 View 中:

var dataView = new DataView({
  collection: {
    ads: ads_per_day,
    age: age_per_day
  },
  model: choiceModel,
  el: '#content'
});

我像这样初始化集合的两个部分:

var DataView = Backbone.View.extend({
    initialize: function(){
      this.ads = this.collection.ads;
      this.age = this.collection.age;
      this.listenTo(this.ads, 'reset', this.render);
      this.listenTo(this.model, 'change', this.update);
      this.parser = d3.time.format('%Y-%m-%d').parse;
    },

看起来可以使用指定的名称引用任一集合，但是当我单独调用集合上的映射时，数据仅从第一个 JSON 返回。并不是说只有“x”和“y”包含数据，而是“a”和“b”从错误的 JSON 中提取数据，它们包含数据，但不是来自 this.age 集合中的 JSON。

getData: function(){
      var parse = this.parser;
      var xVar = this.model.get('x');
      var yVar = this.model.get('y');
      var aVar = this.model.get('a');
      var bVar = this.model.get('b');

      return this.ads.map(function(model){
        return {
          x: parse(model.get(xVar)),
          y: model.get(yVar),
        };
      })

      return this.age.map(function(model){
        return {
            a: parse(model.get(aVar)),
            b: model.get(bVar)
        };
      })
    }

当它们都包含在单个 View 中时，如何引用正确的集合？

Answer 1

如您所知，问题是您从 .getData() 返回了两次。您询问如何最好地解决这个问题，这里有一种将 .getData() 分成两部分的替代方法，即在数组中返回两个映射。您还可以使用backbone的.toJSON()方法来摆脱大部分变量。最后，下划线的map让您指定上下文，因此您不必重命名 this.parser:

getData: function(){
  var attrs = this.model.toJSON();

  var adsMap = this.ads.map(function(model) {
    return {
      x: this.parser(model.get(attrs.x)),
      y: model.get(attrs.y),
    };
  }, this);

  var ageMap = this.age.map(function(model){
    return {
        a: this.parser(model.get(attrs.a)),
        b: model.get(attrs.b)
    };
  }, this);

  return [adsMap, ageMap];
}

当然，哪种解决方案更好取决于您的需求:)。