Средний
30 уроков
(5 часов 6 минут)
Курс
Backbone.js
Видеокурс, который познакомит вас с Backbone.js. Данная библиотека придает структуру веб-приложениям.
Содержание

#10 — Вид коллекции.

Берем на вооружение вид коллекции.

Как вы помните, последний скринкаст был, о коллекции. Все уяснили, что это такое. Но как же рендерить всю эту коллекцию сразу, а не по одной модели ? Для этого и нужен вид коллекции. Не пугайтесь. Это тот же самый Backbone.View , только с чуть другой логикой внутри метода render

Начальный код выглядит так

Ближе к делу. Создадим наш вид списка людей

В качестве tagName, как не удивительно возьмем ul. Следом за созданием вида, давайте инициализируем его экземпляр и передадим в него нашу коллекцию.

Теперь самое интересное. Начнем рендер нашего вида коллекции. Для этого нам понадобится пройтись по коллекции и создать по виду, на каждую модель этой коллекции. После чего вставить каждый срендеренный вид, в элемент нашего списка ul. Напишем следующий код.

Как вы заметили, я использую цепной вызов метода render() и свойства el, один за другим. personView.render().el Для того, чтобы это осуществить нужно в конце метода render , возвращать этот экземпляр вида return this

В PersonView, сделаем тоже самое, для удобства рендеринга и сразу же взятия каждого элемента вида.

Теперь осталось только срендерить и вставить в документ, сам вид коллекции.

Проверяем в браузере, если вы делали все верно, то увидите результат. Всем спасибо! И до скорых встреч на loftblog!

Материалы к уроку:
Делись:

Оставь комментарий!

14 thoughts on “#10 — Вид коллекции.

  1. С каждым уроком становится все более интереснее работать с backbone. Спасибо вам!

  2. Uyntx Xyntu:

    Внутри «вида списка людей», в методе render используется анонимная функция. в качестве её параметров вы передаёте «person» говоря, что этот персон берётся снаружи.
    На самом деле всё не так. Посмотрите повнимательней в http://underscorejs.ru/#each , в качестве первого параметра передаётся значение, в качестве второго ключ итерации… То есть итерация происходит по «this.collection» но никак не по значению переменной person снаружи. Если я не прав то поправьте меня пожалуйста. Спасибо.

    ///беру слова обратно, при повторном просмотре я Вас понял иначе 🙂 (, а именно как описал выше)

    1. Arthur Charaev:

      нет, итерация идет по this.collection.models так как бекбоновские методы коллекций оборачивают андескоровские таким образом, чтобы они ссылались на их модели.

  3. Olega:

    Здравствуйте, помогите пожалуйста у мене выдает ошибку «TypeError: Cannot call method ‘each’ of undefined» я не могу разобраться в чём проблема. Код брал с вашего примера.

  4. Arthur Charaev:

    var person = new Person(); — на 9 минуте не делает ничего

  5. Сергей:

    Объясните, пожалуйста! Не могу понять, зачем в методе each мы в конце передаем в качестве второго параметра this?

    1. Anton Furs:

      чтобы сохранить контекст на саму коллекцию, а не на отдельный её элемент (как будет при использовании перебора через each по умолчанию, без этого параметра).

      1. Сергей:

        Спасибо, теперь понял)

  6. nester:

    подскажите пожалуйста зачем в представлении коллекции строка: this.$el.append(personView.render().el);
    насколько я понял при переборе коллекции на каждую модель создается новое представление модели а потом в указанной мной строке запускается render этой же модели.
    но render представления модели и так запускается при ее инициализации, получается мы запускаем его дважды

    1. Андрей Сорока:

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

      А в начале получается что рендорим 2 раза. Может имеет смысл при инициализации не рендорить

      P.s. при использовании ‘use strict’, если в each function не передать this, то будет undefined, а не windows объект

  7. Артем:

    До этого работал с PHP, с JS знаком только в контексте выборок Jquery… вроде понятно что происходит в видео, делаю параллельно на localhost, но начинаю уже запутываться в этих вызовах и функциях =)

  8. Игнат:

    Есть вопрос, почему во внешнем документе работает

    $(document.body).append(peopleView.render().el);
    Но в main.js не работает

  9. Alexander Rudenko:

    index.html и main.js сохранены в utf-8
    в index.html прописано:

    $(‘body’).append(peopleView.el);

    При выводе вида коллекции, вместо русских букаф
    ромбики с вопросиками.
    Как решить проблему?

Добавить комментарий

Рекомендуемые курсы