Вид в магистрали используется для отражения внешнего вида модели в вашем приложении. Они слушают события и отвечают соответственно.
В следующем уроке я не расскажу вам, как привязать модель и коллекцию для просмотра, но в основном обсуждаю, как View использует библиотеки шаблонов JavaScript, особенно Underscore.js's _template.
Здесь мы используем jQuery для манипулирования элементами DOM. Конечно, вы также можете использовать другие библиотеки, такие как Mootools или Sizzle, но официальная документация BACKBONE рекомендует, чтобы мы использовали jQuery.
Далее мы используем окно поиска в качестве примера для создания нового представления:
SearchView = backbone.view.extend ({initiaze: function () {alert ("добро пожаловать в Backbone!");}}); Var search_view = new SearchView ();Будь то модель, просмотр или сбор, метод инициализации () будет автоматически запущен при создании.
Эль -атрибут
Атрибут EL относится к объекту DOM, который был создан в браузере. Каждое представление имеет атрибут EL. Если это не определено, Backbone создаст пустой элемент Div в качестве атрибута EL.
Давайте создадим свойство EL для представления и установим его на #Search_containe.
<div id = "search_container"> </div> <script type = "text/javascript"> searchView = backbone.view.extend ({initiaze: function () {alert ("Добро пожаловать в Backbone!");}}); var search_view = new SearchView ({el: $ ("#search_container")}); </script>В настоящее время атрибут EL представления относится к элементу DIV, идентификатор которого является search_container. В настоящее время мы связаны с этим элементом Div, поэтому любое событие, которое мы хотим запустить, должно быть в этом элементе Div.
Загрузочные шаблоны
Магистраль сильно зависит от underscore.js, поэтому мы можем использовать небольшие шаблоны в underscore.js.
Теперь давайте добавим метод render () и вызовут его в инициализации (), чтобы метод render () был автоматически запускается при инициализировании представления.
Этот метод render () загрузит шаблон в свойство EL View через jQuery.
<script type = "text/template" id = "search_template"> <babel> search </label> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" value = "search"/> </script> <div Id = "search_container"> </divieps = javascript = javscript = javscript " Backbone.view.extend ({initiaze: function () {this.render ();}, render: function () {// с помощью Underscore Compile и генерировать шаблон var template = _.template ($ ("#search_templet шаблон ); } }); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Добавить события прослушивания
Мы используем свойство Events of the View, чтобы добавить события прослушивания, помня, что события прослушивания могут быть добавлены только в детские элементы свойства EL. Теперь давайте добавим событие прослушивания в кнопку «Учебный элемент».
<script type = "text/template" id = "search_template"> <babel> search </label> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" value = "search"/> </script> <div Id = "search_container"> </divieps = javascript = javscript = javscript " Backbone.view.extend ({initiaze: function () {this.render ();}, render: function () {var template = _.template ($ ("#search_template"). Html (), {}); this. $ El.html (template); dosearch: function (event) {// Когда кнопка нажимается, оповещение («Поиск» + $ ("#search_input"). val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Передайте параметры в шаблон
Шаблон может использовать параметры, прошедшие из представления в форме < %= %>.
<script type = "text/template" id = "search_template"> <!-Используйте пропущенные параметры через < %= %>-> < %> < %= search_label %> </label> <input type = "text" id = "search_input"/> <input type = "id =" search_button " id = "search_container"> </div> <script type = "text/javascript"> searchview = backbone.view.extend ({initiaze: function () {this.render ();}, render: function () {// определить параметры, которые должны пройти var varibles = {search_label: "my search" ////cemples Передайте параметры var tempate = _.template ($ ("#search_template"). html (), переменные); $ ("#search_input"). val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Обрабатывать события DOM
Очень важная функция представления - помочь нам автоматически связывать события интерфейса. Вспомните, как мы привыкли привязывать события с интерфейсными тегами? Может быть, это так:
<p> <input type = "button" value = "create" id = "create" /> <input type = "value =" read "id =" read " /> <input type =" кнопка "value =" update "id =" update " /> <input type =" value = "delete" id = "delete" /> < /p> <script type = "function /javascript"> functionata () { /> < /p> <script type = javascript " readdata () {// todo} функция updatedAta () {// todo} функция deletedAta () {// todo} функция deletedAta () {// todo} $ ('#create'). On ('click', createdata); $ ('#Read'). On ('click', readdata); $ ('#update'). On ('click', updatedata); $ ('#delete'). On ('click', deletedata); </script>Это типичный пример связывающих событий DOM через jQuery. Если вы разрабатываете или разработали какое -то сложное применение, вы, возможно, пытались в некотором роде лучше организовать эти коды, чтобы они выглядели более структурированными и легкими для поддержания.
Объект View Backbone предоставляет нам автоматический механизм привязки для событий, чтобы лучше поддерживать взаимосвязь между DOM и событиями. Давайте посмотрим на следующий пример:
<p id = "view"> <input type = "button" value = "create" id = "create" /> <input type = "value =" read "id =" read " /> <input type =" кнопка "value =" update "id =" update " /> <input type =" value = "delete" id = "delete" /> < /p> <script type = javascript " /var vare" /> < /p> <script = "javascript" /> < /p> <script = "javascript" /> < /p> <script = "vAripcript" /> < /p> <script = "vAripcr Backbone.view.extend ({el: '#view', events: {'click #create': 'createdata', 'click #read': 'readdata', 'click #update': 'updatedata', 'click #delet }, updatedAta: function () {// todo}, deletedata: function () {// todo}, deletedata: function () {// todo}}); var view = new myview (); </script>В этом примере мы помещаем 4 кнопки в тег с представлением идентификатора и связываем этот тег с классом View MyView.
При определении класса представления мы объявляем свойство событий, которое представляет список событий пользователей в представлении, и описывается следующим образом:
Селектор имени события: функция обработчика событийИмя события может быть любым событием, поддерживаемым объектом DOM, селектор может быть любым селекторным строкой, поддерживаемой JQuery или Zepto (включая селектор метки, селектор классов, селектор ID и т. Д.), И обработчик событий должен быть именем метода, которое было определено в самом классе View.
Объект View автоматически анализирует описание в списке событий, то есть используйте jQuery или Zepto, чтобы получить объект DOM, описанный селектором, и связывает функцию обработчика событий с именем события. Эти операции будут автоматически завершены при создании класса представления. Мы можем больше заботиться о структуре самого класса View, вместо того, чтобы сознательно рассматривать, как связать события.
Еще одна проблема, о которой вы можете беспокоиться: если структура DOM представления динамически генерируется, предоставляет ли магистраль соответствующие методы для динамического связывания и удаления событий?
На самом деле, вам не нужно беспокоиться об этой проблеме, потому что события в событиях связаны с элементом EL объекта View с помощью метода Delegate (), а не элемента, описанного селектором. Следовательно, независимо от того, как изменяется структура в представлении, события в событиях действительны.
(Если вы знакомы с jQuery, вы можете понять метод Delegate (), который он предоставляет. Этот метод фактически связывает событие с элементом родительского уровня, а затем запускает событие, проверяя целевой дочерний элемент во время пузыря событий.)
Объект представления связывает события с помощью метода Delegate (), что означает, что нам не нужно заботиться о влиянии изменений структуры представления на события. Это также означает, что элемент, соответствующий селектору в событиях, должен находиться в пределах элемента EL представления, в противном случае связанные события не вступают в силу.
Тем не менее, существуют некоторые случаи, когда нам все еще нужно вручную связывать и undelegateevents (), а методы undelegateevents () используются для динамического связывания и Undelegateevents (), о которых вы можете узнать, посмотрев на документацию API.
Рендеринг представления и данные
Просмотры в основном используются для привязки событий интерфейса и рендеринга данных. Тем не менее, объект View предоставляет только метод render (), связанный с render (), и это пустой метод без какой -либо логики и никаких ссылок нигде. Нам нужно перегрузить его, чтобы реализовать нашу собственную логику рендеринга.
Вид может содержать много логики интерфейса. Рекомендуется, чтобы все подклассы View перегружали метод render () и использовали его в качестве метода ввода для окончательного рендеринга. В развитии команды кодирование строго в соответствии со спецификациями может помочь другим лучше понять и поддерживать ваш код.