Как визуализировать Backbone Collection в представлении списка и элемента?

Я работаю над панелью контактов, которая отображает все контакты пользователя в списке html.

Что у меня есть:

1. UserModel -Это простая модель Backbone.Model с именем пользователя и адресом электронной почты
2. . UserCollection -Используется как список контактов
3. ContactsView -Это список контактов ul
4. ContactView -Это единая модель контакта, отображаемая как li

В настоящее время я ломаю голову над решением, как (и где )я могу получить свою UserCollection и как передать отдельные модели в один элемент ContactView.

Конкретные препятствия:

1. Где я должен получить, сохранить UserCollection
2. Как отобразить список контактов
3. Как отображать элементы контактов
4. Как предотвратить нарушение структуры кода fetch ({успешный вызов :} )

Мой текущий код таков:

точка входа:

// create a new instance of the contact list view
var view = new ContactsView();
// insert the rendered element of the contact list view in to the dom
$('div.contacts-body').html(view.render().el);
view.fetch({ success: view.loadContacts });

КонтактыПросмотреть:

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
    function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {

        var ContactsView = Backbone.View.extend({

            tagName: "ul",

            className: "contacts unstyled",

            attributes: "",

            // I am feeling uneasy hardcoding the collection into the view
            initialize: function() {
                this.collection = new UserCollection();
            },

            // this renders our contact list
            // we don't need any template because we just have <ul class="contacts"></ul>
            render: function() {
                this.$el.html();
                return this;
            },

            // this should render the contact list
            // really crappy and unflexible
            loadContacts: function() {
                this.collection.each(function(contact) {
                    // create a new contact item, insert the model
                    var view = new ContactView({ model: contact });
                    // append it to our list
                    this.$el.append(view.render().el);
                });
            }

        });

        return ContactsView;

});

Вид контактов

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contact.html'],
    function($, _, Backbone, ContactTemplate) {

        var ContactView = Backbone.View.extend({

            tagName: "li",

            className: "contact",

            attributes: "",

            template:_.template(ContactTemplate),

            initialize: function() {
                this.model.bind('change', this.render, this);
                this.model.bind('destroy', this.remove, this);
            },

            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }

        });

        return ContactView;

});

Может ли кто-нибудь помочь мне с моими четырьмя препятствиями.

Ссылки на хорошие примеры приветствуются. Я ориентировал свой стиль кода на список задач, к сожалению, список задач не такой продвинутый...

ОБНОВЛЕННЫЙ КОД:

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
    function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {

        var ContactsView = Backbone.View.extend({

            tagName: "ul",

            className: "contacts unstyled",

            attributes: "",

            events: {

            },

            initialize: function() {
                this.collection = new UserCollection();
                this.collection.on('reset', this.render);
                this.collection.fetch();
            },

            render: function() {
                // in chromium console
                console.log(this.el); // first: html, second: undefined
                console.log(this.$el); // first: html in array, second: undefined
                this.$el.empty(); // error on the called that this.$el is undefined

                this.collection.each(function(contact) {
                    var view = new ContactView({ model: contact });
                    this.$el.append(view.el);
                }.bind(this));

                return this;
            }

        });

        return ContactsView;

Может быть, сброс дважды запускает this.render?