Я действительно пытался сделать то же самое, и просто нашел способ обойти это!
Пытался построить пример списка задач, где у меня уже есть некоторые задачи на странице, хочучтобы привести их в качестве моделей в мою коллекцию 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's 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
);
}
})
Надеюсь, это поможет!