在主干关系模型中组合RESTful数据

我需要将来自两个不同RESTful端点的数据与backbone.js结合起来。我正在尝试使用主干。关系模型扩展。因此，我有以下几点：

app.Pilots = Backbone.RelationalModel.extend({
    url: POST_SUBMITTER.root + 'cloud_base/v1/pilots',
    initialize: function(){
    }
});

app.Flight = Backbone.RelationalModel.extend({
    initialize: function(){
    },
    relations: [
      {
        type: Backbone.HasOne,
        key: 'pilot_id',
        relatedModel: app.Pilots,
    ],  
    wait: true
});

app.FlightList= Backbone.Collection.extend({
    model: app.Flight,
    url: POST_SUBMITTER.root + 'cloud_base/v1/flights',  
 }) ;   
        
app.FlightsView =  Backbone.View.extend({    
    el: '#flights', 
    localDivTag: '#addFlight Div',
    preinitialize(){
       this.collection = new app.FlightList();
    },     
initialize: function(){
    this.collection.fetch({reset:true});
    this.render();
    this.listenTo(this.collection, 'add', this.renderItem);
    this.listenTo(this.collection, 'reset', this.render);
  },
render: function(){
    this.collection.each(function(item){    
        this.renderItem(item);      
    }, this );
  },
renderItem: function(item){        
        var expandedView = app.FlightView.extend({ localDivTag:this.localDivTag });
        var itemView = new expandedView({
            model: item
        })
        this.$el.append( itemView.render().el);   
    }
});     

new app.FlightsView();

---

飞行模型有一个指向飞行员模型的指针，该指针通过一个键

“pilot\u id”

。飞行员模型将有飞行员的名字。在这里的某个地方，主干需要从Pilots RESTful端点获取pilot数据。但我不知道在何处/如何触发该提取。

我无法使Backbone.RelationalModel按预期工作。所以我放弃了关系模型

我想到的是，我为飞行员模型添加了一个集合：

 app.PilotList= app.Collection.extend({
    model: app.Pilots,
    url: POST_SUBMITTER.root + 'cloud_base/v1/pilots?role=subscriber'
 }) ; 

      render: function(){
        this.collection.each(function(item){
          item.set({"p_first_name":this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'),10)}).get("first_name")}, {silent: true }); 
          item.set({"p_last_name" :this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'), 10) }).get("last_name")}, {silent: true } ); 
          this.renderItem(item);        
    }, this );
  },

（从模型中删除URL。）然后在FlightsView中更改了我的初始化方法：

initialize: function(){
    // create the two collections
      this.pilots = new app.PilotList();
      this.collection = new app.FlightList();
     // fetch the collections separately 
     // async:false forces the app to wait until the fetch is complete. 
      this.pilots.fetch({reset:true, async:false} );
      this.collection.fetch({reset:true });    
      this.listenTo(this.pilots, 'reset', this.render);                
      this.render();
      this.listenTo(this.collection, 'add', this.renderItem);
      this.listenTo(this.collection, 'reset', this.render);
    },`

然后在渲染功能中，我使用飞行模型中的“pilot_id”作为我的密钥，将pilots集合复制到flights集合中，并将其输入到pilots模型中：

 app.PilotList= app.Collection.extend({
    model: app.Pilots,
    url: POST_SUBMITTER.root + 'cloud_base/v1/pilots?role=subscriber'
 }) ; 

      render: function(){
        this.collection.each(function(item){
          item.set({"p_first_name":this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'),10)}).get("first_name")}, {silent: true }); 
          item.set({"p_last_name" :this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'), 10) }).get("last_name")}, {silent: true } ); 
          this.renderItem(item);        
    }, this );
  },

现在我的飞行模型上有飞行员的名字和姓氏。{silent:true}使主干在设置该值时不会触发事件。无论如何接收到导频名称时，REST端点将忽略该名称。我可以创建和编辑航班，而不必重新加载飞行员集合。无法通过此界面添加新的试点，添加试点后，重新加载此应用程序对我的应用程序没有什么大不了的。

---

可能有更好的方法，但这对我来说很有效。

我无法让Backbone.RelationalModel按我的预期工作。所以我放弃了关系模型

我想到的是，我为飞行员模型添加了一个集合：

 app.PilotList= app.Collection.extend({
    model: app.Pilots,
    url: POST_SUBMITTER.root + 'cloud_base/v1/pilots?role=subscriber'
 }) ; 

      render: function(){
        this.collection.each(function(item){
          item.set({"p_first_name":this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'),10)}).get("first_name")}, {silent: true }); 
          item.set({"p_last_name" :this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'), 10) }).get("last_name")}, {silent: true } ); 
          this.renderItem(item);        
    }, this );
  },

（从模型中删除URL。）然后在FlightsView中更改了我的初始化方法：

initialize: function(){
    // create the two collections
      this.pilots = new app.PilotList();
      this.collection = new app.FlightList();
     // fetch the collections separately 
     // async:false forces the app to wait until the fetch is complete. 
      this.pilots.fetch({reset:true, async:false} );
      this.collection.fetch({reset:true });    
      this.listenTo(this.pilots, 'reset', this.render);                
      this.render();
      this.listenTo(this.collection, 'add', this.renderItem);
      this.listenTo(this.collection, 'reset', this.render);
    },`

然后在渲染功能中，我使用飞行模型中的“pilot_id”作为我的密钥，将pilots集合复制到flights集合中，并将其输入到pilots模型中：

 app.PilotList= app.Collection.extend({
    model: app.Pilots,
    url: POST_SUBMITTER.root + 'cloud_base/v1/pilots?role=subscriber'
 }) ; 

      render: function(){
        this.collection.each(function(item){
          item.set({"p_first_name":this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'),10)}).get("first_name")}, {silent: true }); 
          item.set({"p_last_name" :this.pilots.findWhere({pilot_id:parseInt(item.get('pilot_id'), 10) }).get("last_name")}, {silent: true } ); 
          this.renderItem(item);        
    }, this );
  },

现在我的飞行模型上有飞行员的名字和姓氏。{silent:true}使主干在设置该值时不会触发事件。无论如何接收到导频名称时，REST端点将忽略该名称。我可以创建和编辑航班，而不必重新加载飞行员集合。无法通过此界面添加新的试点，添加试点后，重新加载此应用程序对我的应用程序没有什么大不了的。
也许有更好的方法，但这对我来说很有效