用骨干渲染

Question

I am trying to learn backbone and I was following along the code school backbone.js course to build my own backbone app. So far I have this code but I am having problems with rendering anything.

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);
 });

I am just trying to create a very simple backbone app, CodeSchool is great but it not good at combining the pieces together and when I try to do that myself I am having problems.

So far the error I am getting is "Uncaught TypeError: Cannot read property 'el' of undefined" in the addOne function of the Posts View. Any help would be much appreciated.

edit: The answer below solved my initial problem, but I also set up an express server to send data to the front end with the code :

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

});

and then I am trying to fetch this data to my collection like this :

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});

But in the page the initial data (name: gorkem and name: janish) is displayed instead of the recently fetched data..

Answer 1

This is the problem line (I see it in a few spots).

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

Try changing it to

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

Render function doesn't return a function to self (the object with a reference to el).