Backbone.js - создавать экземпляры моделей/просмотров из exhit html

Ответ 1

Представления на основе базы данных всегда привязаны к определенному элементу html (атрибут вида el). У вас может быть что-то вроде BookCollectionView привязано к ul#bookCollection и BookView привязано к li.book, что должно быть хорошо с вашей текущей структурой шаблона.

Вы можете сопоставить модель Book с представлением, используя URL-адрес модели. Если модель извлекается из этого URL-адреса, и вы определили привязку события для изменения модели, соответствующее представление должно обновиться с новыми данными модели. То же самое относится к сборнику url и коллекции книг.

Не так много хороших обучающих программ на базе я думаю, но изучите что-то вроде http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/ или http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/. Угадайте, что это легче, если вы можете придумать еще несколько конкретных вопросов!

Ответ 2

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

Пыталась создать пример списка дел, в котором у меня уже есть какие-то todos на странице, вы хотите привести их в качестве моделей в мою коллекцию Todos и управлять ими так же, как это происходит для элементов, которые были добавлены в пустая страница.

Весь код js вставлен как сущность https://gist.github.com/1255736 с комментариями, чтобы объяснить больше.

Важная роль в том, как создать экземпляр коллекции. В основном:

• вы получаете свои существующие элементы html через jQuery. Если ваше представление модели основано на tagName: 'li', то это те теги, которые вам нужно получить здесь.
• Вы повторяете эти теги, чтобы очистить данные, которые там, которые составляют ваши модели, и создавать ваши модели.
• Вы создаете представление для каждой модели, передавая ему модель и базовый элемент. Это была проблема, с которой я столкнулся: я создавал представление и только потом пытался добавить его позже через my_view.el = xxx. Это не работает.
• Вы добавляете свою модель в коллекцию

Примечание: коллекция, как правило, привязана к представлению позже, так что, используя collection.add, также обновит представление. Поскольку инициализация вызывается в конструкторе, коллекция еще не привязана, и вы не будете дублировать элементы в своем HTML, добавив их здесь.

// this is the important part for initializing from html!
khepin.Todos = Backbone.Collection.extend({
    model: khepin.Todo,

    // In this function we populate the list with existing html elements
    initialize: function() {
        _.each(
            // get all the <li></li> todo items (the base for the todo view)
            // and for each of them:
            $('.todo'),
            function(a){
                // Create the model
                var todo = new khepin.Todo();
                // Find the todo text
                var task = $(a).find('span')[0];
                task = $(task).text();
                // set the model correctly
                todo.set({
                    task: task
                });
                // create the todo view
                var todoView = new khepin.TodoView({
                    model: todo,
                    el: a // the el has to be set here. I first tried calling new TodoView and setting the 'el' afterwards
                    // and the view wasn't managed properly. We set the "el' to be the <li></li> we got from jQuery
            });
        // Add this new model to the collection
        this.add(todo);
        },
        this
    );
}
})

Надеюсь, это поможет!

Ответ 3

У меня была та же проблема, и я решил ее таким образом в конструкторе моего основного вида (список ul) - в качестве основы 0,9.

Я преобразовал его в мой разум из синтаксиса coffeescript, поэтому, пожалуйста, будьте осторожны, если есть некоторые синтаксические ошибки.

myListView = Backbone.View.extend({
    initialize: function() {
        ._each(this.$el.children(), function(book, i) {
             new Backbone.View({
                  el: book,
                  model: this.collection.at(i)
             });
        });
    }
});

и называя его следующим образом:

new myListView({
     collection: anExistingCollection,
     el: $('#bookCollection')
});

Важно, чтобы порядок коллекции 'anExistingCollection' был таким же, как и ваши уже сгенерированные записи в списках, поскольку этот пример основан на одном и том же индексе.

(непроверенные)