La vista en la columna vertebral se usa para reflejar la apariencia del modelo en su aplicación. Escuchan eventos y responden en consecuencia.
En el próximo tutorial, no le diré cómo vincular el modelo y la colección para ver, pero discutiré principalmente cómo View usa las bibliotecas de plantillas JavaScript, especialmente la plantilla de _score.js.
Aquí usamos jQuery para manipular elementos DOM. Por supuesto, también puede usar otras bibliotecas, como Mootols o Sizzle, pero la documentación oficial de Backbone recomienda que usemos jQuery.
A continuación, usamos el cuadro de búsqueda como ejemplo para crear una nueva vista:
SearchView = backbone.view.extend ({inicialize: function () {alert ("¡Bienvenido a Backbone!");}}); Var search_view = new SearchView ();Ya sea que se trate de un modelo, vista o colección, el método Initialize () se disparará automáticamente cuando se instanciará.
El atributo EL
El atributo EL se refiere a un objeto DOM que se ha creado en el navegador. Cada vista tiene un atributo EL. Si no está definido, Backbone creará un elemento DIV vacío como el atributo EL.
Creemos una propiedad EL para la vista y establezcamos en #Search_Containe.
<div id = "search_container"> </div> <script type = "text/javaScript"> SearchView = backbone.view.extend ({inicialize: function () {alert ("¡Bienvenido a Backbone!");}}); var search_view = new SearchView ({el: $ ("#search_container")}); </script>En este momento, el atributo EL de la vista se refiere al elemento DIV cuya identificación es búsqueda_container. Estamos vinculados a este elemento div en este momento, por lo que cualquier evento que queremos activar debe estar en este elemento div.
Plantillas de carga
Backbone depende en gran medida de un subscore.js, por lo que podemos usar pequeñas plantillas en subscore.js.
Ahora, agregemos un método render () y llamemos en inicialize () para que el método render () se active automáticamente cuando se inicialice la vista.
Este método render () cargará la plantilla en la propiedad EL de la vista a través de jQuery.
<script type = "text/template" id = "search_template"> <label> Search </label> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" valor = "búsqueda"/> </script> <div = "search_container"> </div> <script type = "text/javascript">> searchView Backbone.view.extend ({inicialize: function () {this.render ();}, render: function () {// a través de underscore compilar y generar template var platplate = _.template ($ ("#búsqueda_template"). Html (), {}); // la temperatura generada está cargada en la carga en el atributo. plantilla ); } }); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Agregar eventos de escucha
Utilizamos la propiedad de eventos de la vista para agregar eventos de escucha, recordando que los eventos de escucha solo se pueden agregar a elementos infantiles de la propiedad EL. Ahora, agregemos un evento de escucha al botón del elemento infantil.
<script type = "text/template" id = "search_template"> <label> Search </label> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" valor = "búsqueda"/> </script> <div = "search_container"> </div> <script type = "text/javascript">> searchView Backbone.view.extend ({inicialize: function () {this.render ();}, render: function () {var platplate = _.template ($ ("#search_template"). Html (), {}); this. $ El.html (plantlate);}, events: {"click [type [type]", "}}}},", ",", "type]", ",", ",", ",", ",", "," typet] ",", ",", ",", "," type] "," typet] "," typet] "," typet] "," typet] "," typet] "," typet] "," typet] "," type] "," typet] ",", ",", ",", ",", "," type] ", Dosearch: function (evento) {// Cuando se hace clic en el botón, alerta alerta ("Buscar" + $ ("#search_input"). Val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Pasar parámetros a la plantilla
La plantilla puede usar los parámetros pasados de la vista en forma de < %= %>.
<script type = "text/template" id = "search_template"> <!-use los parámetros pasados a través de < %= %>-> <label> < %= search_label %> </label> <input type = "text" id = "search_input"/> <input type = "botón" id = "search_button" valor = "buscar"/> </script> <divit <divit <divit <divit <divput " id = "search_container"> </div> <script type = "text/javascript"> searchView = backbone.view.extend ({inicialize: function () {this.render ();}, render: function () {// define los parámetros que deben aprobarse variables variables = {búsqueda_label: "mi búsqueda"}; // parámetros var platplate = _.template ($ ("#search_template"). html (), variables); $ ("#search_input"). Val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Manejar eventos DOM
Una característica de vista muy importante es ayudarnos a vincular automáticamente los eventos de interfaz. ¿Recuerda cómo solíamos vincular eventos a etiquetas de interfaz? Tal vez es así:
<p> <input type = "Botton" value = "create" id = "create" /> <input type = "Botton" value = "read" id = "read" /> <input type = "button" value = "update" id = "update" /> <input type = "button" value = "Eliminar" id = "DELETE" /> </p> <script type = "text /javaScript" {// tODO} function UpdateAdata () {// tODO} function Deletedata () {// tODO} function deletedata () {// tODO} $ ('#create'). On ('click', createATA); $ ('#read'). on ('hacer clic', readData); $ ('##Update'). on ('hacer clic', actualizatedata); $ ('#delete'). on ('hacer clic', deletedata); </script>Este es un ejemplo típico de eventos DOM vinculantes a través de jQuery. Si está desarrollando o ha desarrollado alguna aplicación compleja, es posible que haya intentado organizar estos códigos mejor de alguna manera para que se vean más estructurados y más fáciles de mantener.
El objeto de vista de Backbone nos proporciona un mecanismo de enlace automático para que los eventos mantengan mejor la relación entre DOM y los eventos. Echemos un vistazo al siguiente ejemplo:
<p id = "ver"> <input type = "button" value = "create" id = "create" /> <input type = "button" value = "read" id = "read" /> <input type = "button" value = "update" id = "update" /> <input type = "button" value = "delete" id = "delete" /> < /p> <script type = "text /javascript"> var myview "Var myView" Var myView = var myView " Backbone.view.extend ({el: '#view', eventos: {'click #create': 'creatingata', 'haga clic en #read': 'readData', 'haga clic en #update': 'updatedata', 'click #delete': 'deletedata'}, createdata: function () {// toDo}, readData: function () {//////////ctualatedAl function () {// tODO}, deletedata: function () {// tODO}, deletedata: function () {// tODO}}); Var View = new MyView (); </script>En este ejemplo, colocamos 4 botones en una etiqueta con la vista ID y asociamos esta etiqueta con la clase View MyView.
Al definir la clase View, declaramos una propiedad de eventos, que representa la lista de eventos de usuario en la vista, y se describe de la siguiente manera:
Selector de nombres del evento: función del controlador de eventosEl nombre del evento puede ser cualquier evento compatible con el objeto DOM, el selector puede ser cualquier cadena selectora compatible con jQuery o ZEPTO (incluida la selección de etiquetas, el selector de clases, el selector de identificación, etc.), y el controlador de eventos debe ser el nombre del método que se ha definido en la clase View en sí.
El objeto View analiza automáticamente la descripción en la lista de eventos, es decir, use jQuery o Zepto para obtener el objeto DOM descrito por el selector y une la función del controlador de eventos al nombre del evento. Estas operaciones se completarán automáticamente cuando la clase View esté instanciada. Podemos preocuparnos más por la estructura de la clase View, en lugar de considerar deliberadamente cómo unir los eventos.
Otro problema por el que puede preocuparse: si la estructura DOM de la vista se genera dinámicamente, ¿Backbone proporciona métodos correspondientes para eventos dinámicos de unión y desinstalación?
En realidad, no necesita preocuparse por este problema, porque los eventos en los eventos están vinculados al elemento EL del objeto de vista a través del método delegado (), en lugar del elemento descrito por el selector. Por lo tanto, no importa cómo cambie la estructura dentro de la vista, los eventos en los eventos son válidos.
(Si está familiarizado con JQuery, puede comprender el método Delegate () que proporciona. Este método en realidad une el evento al elemento de la capa principal y luego desencadena el evento revisando el elemento del niño objetivo durante la burbuja del evento).
El objeto View vincula los eventos a través del método delegado (), lo que significa que no necesitamos preocuparnos por el impacto de los cambios en la estructura de la visión en los eventos. También significa que el elemento correspondiente al selector en los eventos debe estar dentro del elemento EL de la vista, de lo contrario, los eventos vinculados no entrarán en vigencia.
Sin embargo, hay algunos casos en los que aún es posible que necesitemos unir y no delegateEvents () y los métodos no delegateEvents () para unirse dinámicamente y sin elegir eligateEvents (), sobre los que puede aprender mirando la documentación de la API.
Renderizar vistas y datos
Las vistas se utilizan principalmente para la vinculación de eventos de interfaz y representación de datos. Sin embargo, el objeto de vista solo proporciona un método render () relacionado con render (), y es un método vacío sin ninguna lógica y no hay referencias a ninguna parte. Necesitamos sobrecargarlo para implementar nuestra propia lógica de representación.
La vista puede contener mucha lógica de interfaz. Se recomienda que todas las subclases de la vista sobrecarguen el método render () y lo usen como el método de entrada para la representación final. En el desarrollo del equipo, la codificación estrictamente de acuerdo con las especificaciones puede ayudar a otros a comprender y mantener mejor su código.