Question

我正在努力学习骨干，我正在沿着代码学校backbone.js课程开始构建我自己的骨干应用程序。到目前为止，我有这个代码，但我在渲染任何东西时遇到问题。

var PostsApp =  new (Backbone.View.extend({
    Collections: {},
    Models: {},
    Views: {},

    start: function(bootstrap){
    var posts = new PostsApp.Collections.Posts(bootstrap.posts);
    var postsView = new PostsApp.Views.Posts({collection: posts});
    this.$el.append(postsView.render().el);

 }
 }))({el : document.body});

PostsApp.Models.Post = Backbone.Model.extend({});

PostsApp.Collections.Posts = Backbone.Collection.extend({});

PostsApp.Views.Post = Backbone.View.extend({
    template: _.template("<%= name %>"),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    }

});

PostsApp.Views.Posts = Backbone.View.extend({
    render: function(){
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(post){
        var postView = new PostsApp.Views.Post({model:post});
        this.$el.append(postView.render().el);
    }
});


 var bootstrap = {
    posts: [
        {name:"gorkem"},
        {name: "janish"}

    ]
 }


 $(function(){
    PostsApp.start(bootstrap);
 });

我只是想创建一个非常简单的骨干应用程序，CodeSchool很棒，但它不善于将各个部分组合在一起，当我自己尝试这样做时，我遇到了问题。

到目前为止，我得到的错误是“未捕获的TypeError：无法在帖子视图的addOne函数中读取未定义的属性'el'”。任何帮助将不胜感激。

编辑：下面的答案解决了我的初始问题，但我还设置了一个快速服务器，用以下代码将数据发送到前端：

app.get('/tweet', function(req,res){
    res.send([{ name: 'random_name' }, {name: 'diren_gezi'}] );

});

然后我试图将这些数据提取到我的收藏中：

var PostsApp =  new (Backbone.View.extend({
  Collections: {},
  Models: {},
  Views: {},

  start: function(bootstrap){
    var posts = new PostsApp.Collections.Posts(bootstrap.posts);
    posts.url = '/tweet';
    posts.fetch();
    var postsView = new PostsApp.Views.Posts({collection: posts});
    postsView.render();
    this.$el.append(postsView.el);

  }
}))({el : document.body});

但是在页面中显示的是初始数据（名称：gorkem和name：janish），而不是最近提取的数据..

Answer 1

这是问题界限（我在几个地方看到它）。

this.$el.append(postsView.render().el);

尝试将其更改为

postsView.render();
this.$el.append(postsView.el);

渲染函数不会将函数返回给self（引用el的对象）。

使用Backbone渲染

1 个答案: