如何使用Model/Collection獲取4個JSON（API）對backbone.js中的一個視圖的響應

Question

我正在學習如何使用backbone.js。我有4個JSON API，我需要收集所有響應並獲取單個視圖的總響應。

我該如何實現這一目標？我是否需要使用集合/模型來實現這個目標？

Answer 1

我使用子視圖實現了2調用主視圖。那變得更復雜了。但是這應該讓你開始。

這些是獲取數據的主要2個集合。如果您想進一步細分（取決於需求），您可以創建一個Model，然後使用model: CityModel（在本例中）將其分配給集合。

var Cities = Backbone.Collection.extend({ 
    url: 'http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=me', 
    parse: function(response) { 
     return response.geonames; 
    } 
}); 

var Earthquakes = Backbone.Collection.extend({ 
    url: 'http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=me', 
    parse: function(response) { 
     return response.earthquakes; 
    } 
}); 

然後子視圖，標準：在這裏你可以創建每個事件。

var EarthquakeView = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template('<strong><%=eqid%></strong> <%=lng%> <%=lat%> magnitude: <%=magnitude%>'), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())) 
     return this; 
    } 
}); 

注意這裏你可以extend一個視圖，以便您不必重複自己。

var CityView = EarthquakeView.extend({ 
    template: _.template('<strong><%=toponymName%></strong> <%=lng%> <%=lat%>') 
}); 

主要看..

var View = Backbone.View.extend({ 
    initialize: function(opt) { 
     // attach to the main body 
     $(opt['main']).append(this.el) 

     this.earthquakesEl = $('<ol>'); 
     this.earthquakes = new Earthquakes() 
     this.earthquakes.on('sync', _.partial(this.renderList, EarthquakeView, this.earthquakesEl), this); 
     this.earthquakes.fetch() 

     this.citiesEl = $('<ol>'); 
     this.cities = new Cities() 
     this.cities.on('sync', _.partial(this.renderList, CityView, this.citiesEl), this); 
     this.cities.fetch() 

     // initialize the element 
     this.render(); 
    }, 
    renderList: function(view, el, collection) { 
     collection.forEach(function(model) { 
      el.append(new view({model: model}).render().el) 
     }); 
    }, 
    render: function() { 
     this.$el.append(this.earthquakesEl); 
     this.$el.append(this.citiesEl); 

     return this; 
    } 
}); 

new View({ main: $('body') }); 

http://jsfiddle.net/u9y574y8/2/

但是也有一些獨立製作2個集通話，並有2個聽衆，等待它們完成，然後將其放置在主視圖。如果您有任何問題，請告訴我。我認爲它非常簡單。