Trying to add a collection to a model and render it in multiple places in a view

Question

I'm trying to build an app that allows you to create items in a view in multiple places.

For instance, I can add a model from a collection when I create a new model in the parent collection.

The problem I'm having is, when I add the collection to the model and it iterates, it's adding the collection for each loop. So it ends up with LOTS of collections in the model that are repeated.

The parent model render has the following loop:

        this.noteTasksViewAdding = new NoteTaskListViewAdding({ collection: tasks });
        $('.note-tasks-list-all').append(this.noteTasksViewAdding.render().el);
        this.collection.each(function(note){
            var view = new NoteView({ model: note });
            $('#items-list').prepend(view.render().el);
        });

Then the model has the following render in it:

    render: function() {
        this.noteTasksViewAdding = new NoteTaskListViewAdding({ collection: tasks });
        $('.note-tasks-list-all').append(this.noteTasksViewAdding.render().el);
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }

What I want to have happen is that the collection is added to the model when it's rendered. I'm open to any suggestions on how to do this better.

Thanks!

Answer 1

I faced the problem as well. The solution is to clear the view before you set the collection. In your case, when you set parent view, you might do this:

$('.note-tasks-list-all').html(this.noteTasksViewAdding.render().el);

Then you can append your collection members.