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

#8 — Отделение шаблона от представления.

В данном уроке мы отделим наш шаблон template от представления backbone.view.

Исходный файл main.js выглядит так:

Добавим в файл index.html следующий код:

Чтобы браузер понял, что это не javascript, а именно шаблон, необходимо обязательно указывать type="text/template"

Вернёмся теперь в файл main.js и перепишем 15ую строку так:

Вот и всё! Мы вынесли наш шаблон из вьюхи и теперь мы можем больше не бояться, что последняя рано или поздно лопнет от всё нарастающего html кода :).

Есть и другой путь проделать то же самое. В свойстве template просто «цепляемся» к айдишнику шаблона:

А функцию render переписываем следующим образом:

Убедитесь сами — результат тот же. Здесь всё целиком и полностью зависит от вашего стиля.

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

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

15 thoughts on “#8 — Отделение шаблона от представления.

  1. все понятно и просто, спасибо.

  2. Dmitriy Medved:

    не хватает HD качества видео, но ничего так)

  3. Александр:

    оставлял комментарий, а он почему то не сохранился сдесь.

    Помогите с ошибкой, плз.

    Пару дней назад начал изучать бэкбон по вашим видеоурокам, очень интересно и понятно рассказываете, вот только остановился на этом. У меня, при выносе темплейта в индексный файл сразу возникает ошибка «Uncaught TypeError: Cannot call method ‘replace’ of undefined » — underscore.js:1150. Если развернуть ошибку:
    _.template — underscore.js:1150
    (anonymous function) — main.js:12

    Что делать не знаю, может быть это связано с тем, что я использую версию бэкбон 1.0? Backbone, underscore скачал последние актуальные на сегодня, jQuery пробовал как 1,8 так и 1,9+
    Плз, хелп:)

    1. NickyMeloman:

      смотрите main.js строку 12. Но ошибка может быть и в версиях так же. Вообщем, нужно целиком ваш код смотреть

      1. Александр:

        дело в том, что весь код в точности такой же, как и в примере

        1. NickyMeloman:

          Точно не зависит от версий. Проверил только что. Скорей всего у вас дело в каких то пропущенных запятых, точках или не правильном порядке подгрузки библиотек. Проверяйте.

          вот рабочий код на всех последних версиях backbone 1.0.0 , jquery v1.10.2, underscore 1.5.1.

          index.html

          Главная страница

          () —

          main.js

          var Person = Backbone.Model.extend({

          defaults: {

          name: ‘Dima’,

          age: 23,

          occupation: ‘web developer’

          }

          });

          var PersonView = Backbone.View.extend({

          tagName: ‘li’,

          template: _.template( $(‘#person-id’).html() ),

          initialize: function() {

          this.render();

          },

          render: function() {

          $(‘.ull’).html( this.$el.html( this.template(this.model.toJSON()) ) );

          }

          });

          var person = new Person;

          var personView = new PersonView({ model: person });

          1. Александр:

            спасибо больше за то, что ответили.

            если честно, я вчера поздно вечером все пересмотрел и нашел причину (поздно было, не успел отписаться), все дело в том, что по глупости своей я скачал андерскор слишком старой версии 1.3.1 с underscore.ru (там на главной) и не посмотрел, поспешил. Как оказалось bavkbony нужно минимум 1.4.3.
            Спасибо!

          2. Александр Крайнов:

            У меня тоже возникла ошибка «Uncaught TypeError: Cannot call method ‘replace’ of undefined » — underscore.js:1150″ при последних версиях всех библиотек. Помогло перенесение подключаемых скриптов из шапки в конец страницы.

            1. Сергей:

              Да, только перенесение подключаемых библиотек после шаблона помогает.

          3. Евгений:

            для это есть сервисы на подобие jsfiddle

  4. Дмитрий Блюс:

    «Убедитесь сами — результат тот же. Здесь всё целиком и полностью зависит от вашего стиля.»
    ЗАЧЕМ при каждом рендере заново получать $().html()? Быдлокод

    1. Anton Furs:

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

      1. Евгений:

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

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

  5. Evgeny Chernyavskiy:

    Парни, шикарные уроки — продолжайте в том же духе!

  6. fenixoleg:

    Добрый день, Дмитрий.
    Начал изучать Backbone.js по Вашим урокам и столкнулся с ошибкой:

    VM21:6 Uncaught ReferenceError: error is not defined

    at eval (eval at _.template (underscore.js:1533), <anonymous>:6:9)

    at template (underscore.js:1540)

    at child.render (main.js:21)

    at child.initialize (main.js:16)

    at child.Backbone.View (backbone.js:997)

    at new child (backbone.js:1542)

    at main.js:26

    Код точно как у Вас.
    Можете подсказать в чем ошибка?

     

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

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