Create new Backbone Views in click event of Backbone View

Question

in the click event of the PodcastView I would like to create multiple new PodcastItemView objects. The jquery $.get works flawlessly, btw.

If I do console.debug(this.pinfo) in the start-function, I receive the JSON array of my podcast items (title, desc, url,...), so this is not the problem. Also it iterates x times through this array, so this works, too.

PodcastView = Backbone.View.extend({
    tagName: "li",
    itemTpl: _.template($("#podcast-item").html()),
    events: {
        "click .p-click" : "start"
    },
    initialize: function() {
        this.listenTo(this.model, "change", this.render);
    },
    render: function() {
        this.$el.html(this.itemTpl(this.model.toJSON()));
        return this;
    },
    start: function() {
        $.get(restUri + "podcast/" + this.model.get("title") + "/items", _.bind(function(data) {
            this.pinfo = data;
            _.each(this.pinfo, function(o) {
                var v = new PodcastItemView({model: o});
                $("#podcast-items").append(v.render().el);
            }, this);
        }));
    }
});

What does not work, however, is the the creation of new PodcastItemView and to append them to #podcast-items. I get the following error:

TypeError: obj[implementation] is not a function (Backbone.js:225)

This is my PodcastItemView.

PodcastItemView = Backbone.View.extend({
        tagName: "div",
        itemTpl: _.template($("#podcast-item-list").html()),
        initialize: function() {
            this.listenTo(this.model, "change", this.render);
        },
        render: function() {
            this.$el.html(this.itemTpl(this.model.toJSON()));
            return this;
        }
    });

I am thankful for every tip or response.

Answer 1

Rewrite the start function to:

start: function() {
        $.get(restUri + "podcast/" + this.model.get("title") + "/items", _.bind(function(data) {
            this.pinfo = data;
            _.each(this.pinfo, function(o) {
                var model = new Backbone.Model(o)  
                var v = new PodcastItemView({model: model});
                $("#podcast-items").append(v.render().el);
            }, this);
        }));

As mentioned in comments your code fails because you are trying to bind native object to the view instead of Backbone.Model.

Hope this helps.