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

#13 — Простые события.

В этом уроке давайте поговорим о событиях dom-events. Наши представления должны каким-то образом прослушивать, когда происходят определенные события: например, когда мы кликаем по кнопке, срабатывает событие click, или двойной клик dbclick по элементу с определенным классом и т.д. Со всем этим отлично справляется jquery, но bockbone и здесь будет чем вас удивить.

main.js:

index.html:

Теперь у нас есть очень элегантное решение для прослушки событий. Даже если вы вернетесь через 6 месяцев к своему проекту — его всё ещё будет легко читать. Как видите, backbone стремиться структурировать ваше приложение во всех его частях.

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

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

10 thoughts on “#13 — Простые события.

  1. tvolf:

    Тут столкнулся с такой вещью. Может ли такое быть, что у вас в реальном примере используется другой файл index.html в отличие от того, что приведен в статье выше ? Дело в том, что после первого же рендера коллекции внутреннее содержимое div-элемента с классом «tasks» полностью. перезаписывается при выполнении:
    ===
    $(‘.tasks’).html(tasksView.render().el);
    ===
    И при следующей попытке рендера уже вываливается сообщение об ошибке библиотеки underscore при вызове _.template(). Оно и понятно: сейчас уже в DOM-дереве нет шаблона для генерации view модели (то есть, нет элемента с id «taskTemplate» (он был перезаписан при первом рендере).
    В общем, вынес я элемент шаблона за пределы div’а с классоv «tasks» вот так:
    ===

    Edit Delete

    ===
    и все заработало. Но хотелось бы узнать, точно ли у вас так выглядел рабочий index.html, как в примере выше ?

    1. kovaldn:

      В данном примере рендер вида происходит только один (!) раз (строка номер 68), при этом содержимое div-элемента «tasks» действительно полностью перезаписывается. Вы правильно заметили, что повторный рендер приведет к ошибке, но повторного вызова в примере и нет :)

      Если же страницу нужно перерисовывать несколько раз (например, вы имеете дело с таблицей, данные которой многократно обновляются при фильтрации), то шаблон действительно необходимо вынести из дива, в который вставляются отрендеренные данные.

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

  2. adminVesGA:

    За уроки огромное спасибо, весьма понятно и интересно.

    Решил сделать чтото вроде jq ui tabs но на backbone, до рендеринга все было замечательно, но вот после, застопорился на самом главном. Как мне например при клике на определенном элементе списка сделать его к примеру жирным а стальные элементы не жирным. Я могу повешать обработку кликов на view определенного элемента списка но как быть с другими элементами из коллекции?

    Надеюсь понятно объяснил. Рад любым советам или идеям. Заранее спасибо.

    1. NickyMeloman:

      здравствуйте, не совсем понятен вопрос. в чем проблема? с помощью jquery вы можете делать любые выборки. Просто повесьте событие клика $(‘ul .special-li’) , а уже в логике функции которая сработает при клике напишите, что $(this).addClass(‘bold’) и $(this).siblings() — остальные

      1. adminVesGA:

        Спасибо, незнал про функцию siblings() , с ней все работает еще проще, но проблема в том что я незнаю как сделать чтобы при загрузке страницы с роутом к промеру «#tab2» открывалась нужная вкладка

        1. NickyMeloman:

          повесить на этот роут соответствующее событие :)

  3. kuzroman:

    Мне интересна строка 43 : addOne: function(task) { …

    данный each это метод jquery
    .each( callback(index, domElement) )

    callback в данном случае addOne, но тогда task должен быть index элемента! разве не так?

    если же это метод underscore _.each(list, iterator, [context]) , которое все объясняет)) то где нижнее подчеркивание — ссылка на underscore?

  4. dehimer:

    Урок отличный. Правда звук странный. Как будто фильтр применили с эффектом записи в железной бочке. А рядом будто водосток по которому бежит вода.

  5. Ilya Reshetnikov:

    Строка var taskView = new App.Views.Task({ model: task });
    что такое task? нигде ведь нету var task = new App.Models.Task()??

  6. vz:

    Все здорово! Изучаю с вами, спасибо большое за видеокаст!
    У вас тут нет урока по настройке Sublime Text? Скачал, но голый он со всем не то, что у вас.. :( Клево подстановки работают… тоже так хочу :)

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

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