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个侦听器等待它们完成，然后将它放在主视图上。如果您有任何问题，请告诉我。我认为它很直接。

如何使用Model / Collection获取4个JSON（API）对backbone.js中一个视图的响应

1 个答案: