Backbone.js：使用 RESTful API 时视图不会呈现

Question

我正在学习 Backbone.js。我可以找到一千零一个 Backbone.js 教程，但其中 none 似乎涵盖了从 RESTful API 获取数据。 None 我发现的其他解决方案似乎适合我的特定问题。

总结

创建模型（包含静态数据）并将其添加到集合中时，以下代码有效，但是当我使用测试 RESTful 服务时，视图不会呈现，但我可以看到响应在控制台中。

我确定我遗漏了一些简单的东西，但我无法确定它是什么。

这是我的 fiddle：https://jsfiddle.net/Currell/xntpejwh/

如果您想在此处查看代码片段，请参见下方。

测试RESTfulAPI：https://jsonplaceholder.typicode.com/

HTML:

<div id="js-spa-container"></div>

JS:

var Post = Backbone.Model.extend();

var Posts = Backbone.Collection.extend({

    model: Post,

    url: 'https://jsonplaceholder.typicode.com/posts',

    initialize: function(){
        this.fetch({
            success: this.fetchSuccess,
            error: this.fetchError
        });
    },

    fetchSuccess: function (collection, response) {
        console.log('Fetch response: ', response);
    },

    fetchError: function (collection, response) {
        throw new Error("Books fetch error");
    }
});

var PostView = Backbone.View.extend({

    tagName: 'li',

    render: function() {
        this.$el.html(this.model.get('title'));

        return this;
    }

});

var PostsView = Backbone.View.extend({

    render: function() {

        var _this = this;

        this.collection.each(function(post) {

            // Put the current post in the child view
            var _postView = new PostView({ model: post });

            // Render the post and append it to the DOM element of the postsView.
            _this.$el.append(_postView.render().$el);
        });
    }

});

var posts = new Posts();

var postsView = new PostsView({ el: '#js-spa-container', collection: posts });

postsView.render();

Answer 1

当您使用 REST API 时，您需要一种机制来等待请求成功后再执行操作。

这是一个简单的解决方法：https://jsfiddle.net/wnxhq98p/

posts.fetch({
  success: postsView.render.bind(postsView),
  error: this.fetchError
});

一种常见的模式是在视图的 initialize 中获取集合，并在成功调用时调用它的 render。

或者创建集合，在视图的 initialize 中设置集合事件侦听器，这将适当地呈现视图，然后在 Backbone 路由器中获取集合，但要做到这一点，集合获取不能在 initialize 上立即发生，以便让其他组件有机会设置监听集合的事件

Backbone.js：使用 RESTful API 时视图不会呈现

Backbone.js: View won't render when using RESTful API

backbone.js

总结