Backbone.js:View-won';使用RESTful API时不渲染
我正在学习Backbone.js。我可以找到一千零一个Backbone.js教程,但似乎没有一个涵盖从RESTful API获取数据的内容。我找到的其他解决方案似乎都不适合我的具体问题 总结 以下代码在创建模型(包含静态数据)并将其添加到集合中时有效,但在使用test RESTful服务时,视图不会呈现,但我可以在控制台中看到响应 我肯定我错过了一些简单的东西,但我不能确定它是什么 这是我的小提琴: 如果您希望在此处查看代码段,请参见下面的代码段 测试RESTful API: HTML:Backbone.js:View-won';使用RESTful API时不渲染,backbone.js,Backbone.js,我正在学习Backbone.js。我可以找到一千零一个Backbone.js教程,但似乎没有一个涵盖从RESTful API获取数据的内容。我找到的其他解决方案似乎都不适合我的具体问题 总结 以下代码在创建模型(包含静态数据)并将其添加到集合中时有效,但在使用test RESTful服务时,视图不会呈现,但我可以在控制台中看到响应 我肯定我错过了一些简单的东西,但我不能确定它是什么 这是我的小提琴: 如果您希望在此处查看代码段,请参见下面的代码段 测试RESTful API: HTML: 当您使
当您使用RESTAPI时,您需要一种机制来等待请求成功后再进行操作 下面是一个简单的修复方法: 一种常见的模式是在视图的
初始化
中获取集合,并在成功调用时将其设置为渲染
或者创建集合,在视图的初始化中设置集合事件侦听器,该侦听器将适当地呈现视图,然后在主干路由器中获取集合,但是,为了使此工作正常,收集获取不能在初始化时立即发生,以便让其他组件有机会设置侦听收集的事件
<div id="js-spa-container"></div>
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();
posts.fetch({
success: postsView.render.bind(postsView),
error: this.fetchError
});