如何使用模型/集合获取 4 个 JSON (API) 响应到主干.js 中的一个视图

Posted 2023-02-26

【中文标题】如何使用模型/集合获取 4 个 JSON (API) 响应到主干.js 中的一个视图

【英文标题】：How to fetch 4 JSON (API) Responses to one view in backbone.js using Model/Collection

【发布时间】：2015-10-15 01:19:53

【问题描述】：

我正在学习如何使用backbone.js。我有 4 个 JSON API，我需要收集所有响应并获取单个视图的总响应

我怎样才能做到这一点？我需要使用集合/模型来实现这一点吗？

【参考方案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 个侦听器等待它们完成，然后将其放置在主视图上。如果您有任何问题，请告诉我。我认为它非常简单。

【讨论】：

感谢您的详细解释。我今天做了一些研究并使用 jQuery $.when 来结合两个响应

我不知道你的确切用例，但 99% 的时间，当我需要异步加载东西时，我从不尝试将它们组合起来，你只会惹恼用户。最好只加载（如果可能）尽可能多的碎片并在它们完成时缝合它们，而不是等到一切都完成然后缝合它们。另一方面，如果你能提供一些关于你实际在做什么的代码，我会更有帮助。