0

我正在尝试学习骨干网，并且我正在遵循代码学校的骨干网.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 很棒，但它不擅长将各个部分组合在一起，当我自己尝试这样做时，我遇到了问题。

到目前为止，我得到的错误是 Posts 视图的 addOne 函数中的“Uncaught TypeError: Cannot read property 'el' of undefined”。任何帮助将非常感激。

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

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 和名称：janish），而不是最近获取的数据。

4

1 回答 1

1

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

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

尝试将其更改为

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

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

于 2013-06-06T21:06:55.447 回答