[Powered by Google Translate] [Seminario] [marcos de JavaScript: ¿Por qué y cómo] [Kevin Schmid] [Universidad de Harvard] [Este es CS50.] [CS50.TV] 

Hola a todos. Bienvenido al seminario Frameworks JavaScript. Mi nombre es Kevin, y hoy voy a hablar de marcos de JavaScript, y el objetivo de este seminario no es para llegar a, por ejemplo, dominar un marco particular, per se pero para darle una amplia introducción a un par de marcos y demostrar por qué va a querer usar un framework. 

Antes de hacerlo, voy a dar un poco de historia en JavaScript, y luego vamos a tomar desde allí. Vamos a empezar por la aplicación de una lista de tareas pendientes. Aquí está nuestra lista de tareas para hoy. Es un poco gracioso. Tenemos que aplicar una lista de cosas por hacer en JavaScript. Esto es lo que va a ser similar, por lo que es nuestro primer objetivo. No vamos a utilizar un marco para hacer eso. Vamos a código JavaScript y obtener la lista de cosas por hacer que funcione. A continuación, vamos a mejorar el diseño sin necesidad de utilizar un marco. Vamos a hablar de varias cosas que podemos hacer con sólo solos JavaScript para hacer nuestra lista de tareas un poco más bien diseñado. A continuación, vamos a tirar un poco de jQuery, y luego vamos a ver la misma lista de tareas pendientes, sólo implementado en diferentes marcos, y vamos a discutir  los pros y los contras en el camino. 

Vamos a comenzar la aplicación de esa lista de cosas por hacer. Digamos que se nos ha dado este HTML. Voy a hacer esto un poco más pequeño. Como puedes ver, tengo un poco de encabezado que dice Todo y una pequeña caja donde pueda entrar en la descripción de un TODO y luego un botón nuevo tema, así que vamos a tratar de entrar en una nueva del todo a esta lista. Dale un seminario marcos JavaScript y estoy de golpear elemento nuevo. Tengo esta alerta de JavaScript que me dice implementar. Tenemos que ponerlo en práctica. Vamos a ver el código para esto, tanto el código HTML y JavaScript. Aquí está nuestro HTML. Como se puede ver aquí, aquí está nuestro pequeño encabezado Todos. Eso fue todo lo negrita en la parte superior, y luego tenemos el cuadro de entrada con el marcador de posición, y luego hay un cierto atributo de este botón que llama a esta función addTodo. ¿Alguien quiere adivinar lo que al hacer clic se significando? [Estudiante respuesta inaudible] Bueno, el clic en el es algo así como un evento, como hacer clic con el ratón es sólo un evento, y lo que estamos haciendo es que estamos atando el caso de hacer clic en este botón para ejecutar esa función. AddTodo es este controlador de eventos para hacer clic en ese botón. 

Como se puede ver, al hacer clic en el botón Nuevo elemento el evento click en despiden, y esta función se llama. Echemos un vistazo a la función. Como puede ver, aquí está mi código de JavaScript hasta ahora. Lo que tengo en la parte superior es una estructura de datos global para mi lista de cosas por hacer. Se parece a una matriz. Es sólo una matriz vacía. Y luego tengo la función addTodo que hemos visto antes, y la única línea de código no esta alerta. Se avisa me implementar, y luego tengo 2 tareas. Tengo que añadir el del todo a la estructura de datos global, y luego quiero llamar la lista de tareas pendientes. Nada demasiado elaborado todavía, pero JavaScript que puede no estar familiarizado con, así que voy a ir despacio y revisar los fundamentos de JavaScript en ese camino. 

Vamos a darle una oportunidad a esto. Digamos que el usuario introduce algo en este cuadro. Me acaba de escribir algo aquí, texto. ¿Cómo puedo ordenar el acceso que el texto a través de JavaScript? Recuerde que JavaScript, una de sus características fundamentales es que nos da este acceso mediante programación a la DOM. Esto nos permite acceder a los elementos y sus propiedades de este HTML real. La forma en que hacemos con los huesos al descubierto JavaScript es en realidad podemos usar una función de JavaScript llamada GetElementById. Quiero guardar el texto que está escrito allí, en alguna variable, así que voy a decir una nueva variable llamada new_todo, y yo voy a conseguir ese elemento. Esta es una función,. GetElementById. Y ahora me estoy poniendo un elemento de identificación, por lo que necesitará el ID de ese cuadro de texto, así que me he dado la new_todo_description ID. Así es como me voy a poner un elemento. Ese es mi argumento para esta función para especificar los ID de conseguir. Y eso es un elemento de HTML, y no tiene propiedades. Usted ha visto estos. Son atributos. El atributo del elemento de texto que almacena la entrada del usuario se denomina valor. Me salvó el valor del cuadro de texto que ahora en esta variable llamada new_todo. Ahora tengo acceso mediante programación a esta variable, que es una especie de fresco porque ahora lo que puedo hacer es que puedo añadir a mi lista de cosas por hacer. 

La forma en que íbamos a hacer esto en JavaScript y no se preocupe si no está familiarizado con este, pero sólo a través de él es todos.push porque ese es el nombre de mi estructura de datos mundial aquí, y yo voy a empujar new_todo. Esto es muy bueno porque ahora he añadido a mi JavaScript representación de la lista de tareas pendientes. Pero ahora, ¿cómo puedo obtener de nuevo al HTML? Tengo que encontrar una manera de ordenar de empuje hacia atrás. En otras palabras, como que tengo que sacar esto. Lo que vamos a hacer es que vamos a elaborar la lista de tareas pendientes. Necesito actualizar otro HTML en esa página, y como se puede ver, he dejado este pequeño contenedor aquí, este divisor de la página cuyo identificador es de Todos, y yo voy a poner la lista de cosas por hacer allí. Primero voy a aclarar que a causa, por ejemplo, había una vieja lista de cosas por hacer allí. Me estoy poniendo este elemento por ID nuevo, y estoy accediendo al código HTML interno de ese elemento, y yo voy a limpiar eso. Si dejamos este código como es, nos gustaría ver una nada en blanco allí, y ahora quiero empezar haciendo mi nueva lista de tareas. Estoy básicamente, va a acabar con mi lista de cosas por hacer. 

Ahora el interior HTML interno que Todos div está del todo claro, y ahora tengo que empezar a añadir a mi lista. La primera cosa que quiero añadir de nuevo es la etiqueta lista desordenada, lo que denota que, básicamente, este es el comienzo de una lista no ordenada. Ahora para todos los elementos en mi array Todos quiero imprimirlo dentro de ese HTML. Quiero agregar que en la parte inferior de la lista. Al igual que en C, puedo utilizar un bucle for, y voy a empezar por el principio de mi lista en el elemento 0, y me voy a ir hasta el final a la longitud de la lista. De hecho, podemos obtener la longitud de un array en JavaScript utilizando la propiedad length. Básicamente, voy a hacer algo muy similar en el interior de aquí para imprimir ese elemento. Puedo tener acceso de nuevo la div Todos, la propiedad HTML interno que, y yo voy a añadir en este nuevo elemento de la lista, y que va a estar rodeado de esta etiqueta li, y yo voy a concatenar con el operador +, y ese es el elemento i de mi Todos matriz, y luego me voy a cerrar esa etiqueta. Ahora para todos los elementos vamos a añadir una nueva entrada en la lista. Y entonces todo lo que realmente tenemos que hacer es cerrar esa etiqueta. Sólo tengo que cerrar esa desordenada tag lista. 

¿Le da una idea de cómo funciona eso? Esto abre la lista completa. Esto añade elementos individuales de la lista de Todos a la lista, y después de que se cierra la lista completa, y este es mi función addTodo. Yo, básicamente, empezar por conseguir el TODO en el cuadro de texto. Añado que en la matriz de Todos, y luego volver a hacer la lista de cosas por hacer. Ahora puedo agregar elementos a la lista. Esto es muy emocionante, porque en tan sólo unas pocas líneas de código básicamente hemos hecho una lista de cosas por hacer, donde podemos añadir elementos. Grande. Eso es algo de una introducción básica a JavaScript. No se preocupe demasiado acerca de la sintaxis, por ahora, pero pensar en esto conceptualmente. Teníamos un poco de HTML. Tuvimos un cuadro de texto en la página que básicamente permiten a los usuarios introducir un elemento de tareas pendientes para añadir. Y luego utilizamos JavaScript para traer que tareas pendientes de ese cuadro de texto. Nos guardaron que dentro de una matriz de JavaScript, que es básicamente como nuestra representación programática de esa lista de cosas por hacer, y luego imprimí. Esta es todos.js. 

Se trata de una especie de fresco, pero ¿cómo podemos ir más lejos? Bueno, como pueden ver, esto no es como una completa lista de tareas pendientes. Por ejemplo, no puedo marcar cualquiera de estos elementos como incompleta, como si quisiera cambiar la prioridad de los elementos o eliminar elementos. Esto está bien, pero podemos ir más lejos. No voy a hablar mucho sobre la adición de características adicionales, pero podríamos tomar ese más allá. Vamos a hablar acerca de cómo agregar una característica más a esta lista de cosas por hacer, que se va a poder comprobar que un individuo tarea pendiente y tienen que ser tachado, así que básicamente diciendo que he hecho esto. Vamos a ver un poco de código que podría lograrlo. Note lo que he hecho en la parte superior es que he añadido un nuevo array global llamado completo. Básicamente estoy usando esto para almacenar tanto los elementos de la lista de tareas pendientes están completos o no. Esta es una manera de hacer esto. Si miro a la ejecución de este, en la pantalla, básicamente, si entro en un TODO y pulse el botón de activación cruza hacia fuera, por lo que cada elemento en esta lista tiene ya sea un completo o el estado incompleto, y estoy usando otra matriz para representar eso. 

Básicamente para cada tareas pendientes en esa Todos array hay un elemento de la matriz completa que indica básicamente si que es completa o no. He tenido que hacer cambios muy mínimos en este código, así que aquí está nuestra función addTodo. Tenga en cuenta que aquí me estoy empujando a la matriz, y estoy empujando un 0 a la gama completa, básicamente en paralelo con ese nuevo empuje del todo que decir Estoy agregar este artículo, y está unida a este valor, lo que significa que es incompleta. Y entonces me redibujar la lista de tareas pendientes. Ahora, noto que he añadido esta función drawTodoList. Esto toma mucho del código que teníamos antes, básicamente borra la caja y luego señala a la nueva lista de tareas pendientes. Pero se dio cuenta que dentro de este bucle for estamos haciendo un poco más ahora. Básicamente estamos comprobando si el elemento correspondiente a Todo ith aquí es completa, y estamos actuando de manera diferente en estas 2 circunstancias. Si está completo, estamos añadiendo esta etiqueta del, que es básicamente la manera de conseguir que la huelga a través del efecto tachando la lista de cosas por hacer si es completa, y si no es así, no vamos a incluirlo. Y para que tipo de se encarga de eso, 

y esa es una manera de lograr esto. Y luego darse cuenta cuando el usuario hace clic en uno de estos que alternar el estado de finalización de la misma. Cuando el usuario hace clic, vamos a invertir si ha sido completada o no, y luego vamos a volver a dibujarlo. Este tipo de obras. Tenemos las funciones que llevan a cabo sus propias tareas, y esto está bien. ¿Hay algo que podemos hacer mejor en esto, sin embargo? Observe que tenemos estas 2 series mundiales. Si esto era C, y teníamos 2 arrays ese tipo de representados datos que fueron una especie de relacionados de alguna manera lo usaríamos en C de combinar estos 2 campos en algo que encapsula las dos piezas de información? ¿Alguien quiere hacer una sugerencia? [Estudiante respuesta inaudible] 

Exactamente, así que podríamos utilizar algún tipo de estructura, y si piensas en, digamos, pset 3, Recuerdo que tuvimos diccionario, y luego tuvimos que si la palabra Fue en el diccionario, y toda esa información se elaboró dentro de alguna estructura de datos. Una de las cosas que puedo hacer con este código para evitar que estos 2 conjuntos diferentes para piezas similares de información es lo que puedo combinarlos en un objeto de JavaScript. Vamos a echar un vistazo a eso. Observe que sólo tengo una matriz en la cima ahora y lo que he hecho es-y esto es sólo la sintaxis de JavaScript para la clase de la creación de una versión literal de un objeto, y nota que hay 2 propiedades, por lo que tenemos el TODO, y está abierto, así como si es completa o incompleta. Este código es muy similar. Estamos usando los objetos JavaScript. Este tipo de cosas mejore. Como ahora, todos estos campos de información relacionada se mantienen juntos. Cuando vamos a imprimirlo, podemos acceder a los campos. 

Nótese cómo lo estamos haciendo de Todos [i]. Completa en lugar de revisar la matriz completa separada, y notamos cuando queremos obtener la cadena de tareas que estamos recibiendo la propiedad de tareas de que TODO, por lo que este tipo de tiene sentido porque cada elemento tiene estas propiedades intrínsecas al respecto. Tiene un TODO, y tiene ya sea completa o no. No hay muchos cambios no funcionalmente, acaba de agregar un poco más para el código. Se trata de una mejora en algunos frentes, ¿verdad? Me refiero a que un factor fuera el diseño un poco. Ahora tenemos objetos para encapsular básicamente estos datos. ¿Hay algo más que podemos hacer de aquí en términos de JavaScript? Como aviso de que el código aquí para obtener el código HTML interno de un div es un poco, supongo, mucho tiempo. Hay document.getElementById ("todos"). InnerHTML. Una de las cosas que podríamos hacer para que este código se ven un poco más amigable para no tener que seguir desplazándose hacia la izquierda y derecha, arriba y abajo, es que podría utilizar una biblioteca como jQuery. 

Vamos a ver el Seminario 2, y este es el mismo código, pero se ha hecho con jQuery. Puede que no sea muy familiarizado con jQuery, pero sólo sé que jQuery es una especie de una biblioteca de JavaScript eso hace que sea más fácil hacer cosas como acceso a los distintos elementos del DOM. Aquí en vez de decir document.getElementById ("todos"). InnerHTML Puedo usar la forma más limpia tanto en jQuery, que es sólo para usar selectores. Como puede ver, este código se hizo un poco más limpio, muy similar funcionalmente, pero esa es la idea. Hemos visto un par de cosas hasta el momento, así que empezamos con la implementación de JavaScript sólo prima. Hemos añadido nuevas características y mostramos cómo podemos mejorar con justo lo que tenemos en JavaScript. 

¿Alguien ve ninguna dificultad con este diseño? Es decir, supongo, o no necesariamente dificultades, pero vamos a decir no estábamos haciendo un proyecto de lista de cosas por hacer, y mañana nos decidimos hemos querido hacer una lista de compras o de un proyecto de lista de la compra. Muchas de estas características son muy similares. Muchas de las cosas que queremos salir de JavaScript son muy comunes, y esto subraya la necesidad de algún tipo de forma de hacer esto más fácil de hacer. Tuve que construir todo este acceso HTML, todo este acceso DOM, que voy a representar a la lista de tareas con este modelo. Y noto que soy responsable como el desarrollador de JavaScript para mantener el código HTML y JavaScript que tengo en sincronía. Nada de lo hecho automáticamente que la representación JavaScript o la lista de tareas pendientes de ellos acaban fuera de HTML. Nada hace cumplir que a excepción de mí. Tuve que escribir el sorteo de tareas función de lista. Y eso no puede ser, quiero decir, que es razonable hacerlo, pero a veces puede ser tedioso. Si usted tiene un proyecto más amplio, que podría ser difícil. 

Marcos, uno de los propósitos de marcos es simplificar el proceso y tipo de factor de salida estos common-Supongo que se podría decir que los patrones de diseño que las personas suelen tener algún tipo de forma de representar los datos, ya sea una lista de amigos, si esa es la información del mapa o algo así, o una lista de tareas pendientes. Algunas personas tienen por lo general una forma de representación de la información, y por lo general tienen que mantener ese tipo de información en sincronía entre lo que el usuario ve en algún tipo de vista, hablando en términos de como el controlador de vista de modelo que viste en la conferencia, y entonces el modelo, que en este caso es esta matriz de JavaScript. Marcos nos dan una manera de resolver ese problema. Ahora echemos un vistazo a la aplicación de esta lista de tareas en un marco llamado angularjs. Esto es todo. Observe que encaja en una diapositiva. Yo no tengo que desplazarse a la izquierda ya la derecha. Esto probablemente no es una gran razón para recomendar el uso de un marco, pero note que estoy siempre acceso a los elementos HTML individuales aquí? Estoy cada vez va en el DOM? ¿Ve usted alguna document.getElementById o algo así? No, eso fue. 

Angular nos ayuda a mantener el DOM y JavaScript nuestra representación de algo tipo de sincronizados, por lo que si no está en el archivo js, si no hay forma de programación para llegar a todo ese contenido HTML Del JavaScript cómo estamos teniendo esto en sincronización? Si no está en el archivo js., Tiene que estar en HTML, ¿verdad? Esta es la nueva versión del archivo HTML, y notamos que hemos añadido mucho aquí. Observe que hay estos nuevos atributos que dicen ng-clic y ng-repeat. El enfoque de angular a la solución de este problema de las dificultades en el diseño es hacer básicamente HTML mucho más potente. Angular es una forma de permitir que usted haga HTML algo más expresivo. Por ejemplo, yo puedo decir que me voy a atar o enlazar este cuadro de texto a una variable dentro de mi código JavaScript Angular. Este ng-model hace precisamente eso. Que básicamente dice que el elemento dentro de esta caja de texto, simplemente asociar eso con el new_todo_description variables dentro del código JavaScript. Eso es muy poderoso porque no me tengo que ir expresamente a el DOM para obtener esa información. No tengo que decir document.getElementById. Yo no tengo que usar jQueries como acceso DOM. Puedo asociarlo a una variable, y luego cuando cambio la variable dentro de JavaScript se trata de mantenerse en sintonía con el código HTML, lo que simplifica el proceso de tener que ir y venir entre los dos. ¿Eso tiene sentido? 

Y fíjense que no hay código de acceso HTML. Hemos conseguido hacer HTML más potente, y ahora, por ejemplo, podemos hacer cosas como esta, como cuando hace clic en este, llamar a esta función en el ámbito de todos.js, y podríamos hacer eso antes, pero hay otras cosas, como este ng-modelo, y observar este ng-repeat. ¿Qué piensa usted que esto hace? Aquí está nuestra lista desordenada de antes. Tenemos las etiquetas ul, pero siento que he renderizado esa lista dentro del código JavaScript? No estoy siempre haciendo explícita esa lista. ¿Cómo funciona esto? Bueno, la forma angular logra esto es lo que se llama un repetidor. Básicamente dice que quiero imprimir este HTML para todas las tareas pendientes en el interior de mi Todos matriz. Dentro de todos.jr hay una variedad de Todos aquí, y esto le dirá ir angular a través de la matriz, y por cada elemento que se ve Quiero imprimir este HTML. Esto es un poco impresionante, ya que sólo puede hacer esto sin tener que escribir un bucle, que para obtener una lista de tareas que tenía sólo 30 líneas de código puede no ser lo más beneficioso, pero si usted tiene un proyecto grande, esto podría ser muy conveniente. 

Esta es una solución a este problema, haciendo más potente HTML, y que nos permite seguir con JavaScript y HTML en sincronía. Hay otras maneras posibles para resolver este problema, y no cada marco lo hace. No todo marco trabaja en esta línea. Algunos marcos tienen diferentes enfoques, y es posible que usted goce de codificación en un marco sobre el otro. Echemos un vistazo a uno más. Esta es la lista de cosas por hacer codificado en un marco llamado Backbone. Voy a pasar por esto rápidamente. Voy a empezar con el código HTML antes de ir allí. Un segundo. Comenzando con el HTML, como se observa, el HTML es muy similar a lo que era antes, así que no hay mucho de nuevo en ese frente. Pero nuestra js es un poco diferente. Backbone tipo de tiene esta idea, o se basa en la idea que mucho de lo que hacemos con, por ejemplo, los proyectos de JavaScript es pensar en modelos y colecciones de estos modelos. Esto podría ser, por ejemplo, una foto y colecciones de fotografías, o la idea de un amigo y colecciones de amigos. Y a menudo, cuando estamos programando aplicaciones JavaScript vamos a resolver de representar la idea de tener un grupo de amigos de alguna manera en JavaScript, y Backbone nos da esta capa en la parte superior de las matrices y los objetos existentes de JavaScript para hacer las cosas más poderosas con que más fácilmente. 

Aquí he definido un modelo para-do, y usted no tiene que preocuparse demasiado acerca de la sintaxis, pero se dio cuenta de que lo que es una de las propiedades de esta? Cuenta con un campo predeterminado. Backbone me permite especificar ya del palo todo nuevo a hacer eso creo que va a tener estos valores predeterminados. Ahora puedo personalizar esto, pero ser capaz de especificar los valores predeterminados es agradable, y es un poco conveniente porque esto no es algo que es como inherente a JavaScript, y ahora no tengo que explícitamente Todos dicen que los están incompletos. Lo que puedo decir de buenas a primeras que Todos van a ser marcados como incompleta. Nótese entonces, ¿qué es esto? Ahora tengo una lista de cosas por hacer, y eso es una colección. Observe el campo asociado con el modelo dice del todo. Esta es mi manera de decir que la columna vertebral Yo voy a estar pensando en una colección de estos Todos individuales. Esta es básicamente la estructura del modelo para mi programa. Aquí tengo esta idea de una colección, y, básicamente, los elementos contenidos en esa colección de todos van a ser estas de Todos, y que es muy natural en este sentido porque yo sí tengo Todos, y los tengo en una colección. 

Vamos a ver un poco más de esto. Aquí está una vista Backbone. La otra cosa que Backbone dice es que muchos de los modelos que usted está pensando, o incluso colecciones van a tener que tener alguna manera de que se muestra. Tenemos que hacer que la lista de cosas por hacer, y ¿no sería bueno si pudiéramos proveer para cada modelo o asociar a cada modelo de este punto de vista que nos permite Supongo que conectar los dos juntos? Mientras que antes teníamos que usar un bucle que se ejecute a través de todas las tareas pendientes en la lista y luego imprimirla aquí que básicamente podemos conectarlo con este modelo. Esta es una vista de tareas pendientes. Esto se asocia con el TODO hemos constatado antes. Ahora cada TODO es mostrable o renderizable por este punto de vista de tareas pendientes. Observe algunos de los campos. ¿Qué crees que es esto tagName, tagName: li? Recuerde que desde antes, cuando queríamos hacer un TODO habría que vincular explícitamente Todos nuestros con esta etiqueta li. Ahora estamos diciendo que cuando esto del todo se va a vivir va a estar dentro de una etiqueta li. Y ahora también estamos asociando eventos con nuestros Todos. 

Cada TODO tiene este evento. Si hace clic en más o menos el botón de cambio, eso es lo que estoy diciendo no, entonces básicamente marcar el del todo como lo contrario de lo que era antes y luego volver a hacer la solicitud. Esto es un poco similar al código anterior. Recuerde que cuando marcamos como bien lo contrario o- y entonces vuelven a representar él. Pero note ahora este evento que solía ser algo que estaba en el código HTML. Estaba sentado allí. El botón tenía un clic. Al hacer clic en el botón, es como que hace las cosas a estableció que TODO sea incompleta. Aquí nos hemos asociado el evento de hacer clic en ese botón de activación e invertir ya sea dentro o fuera de esta opinión. 

Esta es una buena manera de crear este evento para que sea muy estrechamente unidos este punto de vista, por lo que cuenta de esto una vez más. Tengo este método render, y no tenemos que pasar por los detalles. Es algo similar a lo que teníamos antes, pero noto que no estoy recorriendo nada. No voy a imprimir esa etiqueta ul que es una especie de decir que voy a imprimir todos los elementos. Estoy proporcionando la funcionalidad para la prestación de este elemento de tarea. Este es un concepto muy poderoso porque en el fondo nuestra lista de tareas consiste en todas esas Todos, y si podemos especificar básicamente la manera de hacer que uno de los Todos entonces podemos tener nuestra poderosa red troncal per se rinda todo el Todos llamando al método render en Todos los individuales. Este es un concepto que es útil aquí. Ahora, una buena pregunta es cómo se esta aplicación está poniendo juntos? Debido a que tenemos la capacidad de hacer un TODO, pero ¿cómo hacemos para que la idea de múltiples Todos? 

Vamos a echar un vistazo a eso. Esta es la última parte. Observe que tenemos una vista de la lista de cosas por hacer aquí, y cuenta también es un punto de vista. Y para ir más de un par de cosas, este método initialize será llamado cuando creamos primero esta lista de cosas por hacer. Como se puede ver, es como la creación de la lista de tareas pendientes y asociarlo con esta opinión. Y luego he añadido las funciones aquí, así que básicamente cuando se agrega un elemento- esto es similar al método addItem vimos antes- Voy a crear un objeto nuevo del todo, y note realmente estoy llamando este nuevo método del todo, por lo que este es proporcionado por Backbone, y puedo pasar mis propiedades aquí. Y ahora cada TODO que creo con esto conseguir que la funcionalidad que hemos visto antes. Note que estoy limpiando el cuadro de texto antes de un pequeño pequeño detalle- y estoy añadiendo esta colección. 

Esto casi parece raro porque antes sólo teníamos que hacer eso todos.push, y luego terminamos, y esto puede parecer más complicado para este proyecto en particular, y es posible que Backbone o incluso angular o cualquier otro marco no se adapta a su proyecto particular, pero creo que es importante pensar en lo que esto significa en una escala más grande para proyectos de mayor envergadura, porque si tuviéramos un proyecto más amplio en el que representábamos alguna colección realmente complejo, algo más profundo que una simple lista de cosas por hacer, digamos que una lista de amigos o algo así, esto podría ser útil porque podríamos organizar nuestro código de una manera muy conveniente, de una manera que haría más fácil para alguien más que quería recoger a un proyecto para construir. Se puede ver que esto proporciona una gran cantidad de estructura. Y luego te llamo hacer en este addItem. Render, como se puede ver, y usted no tiene que aprovechar esta sintaxis completa, pero en el fondo de cada modelo que va a llamar al método render individual. Eso es una especie de dónde viene. Vamos a especificar cómo representar los Todos individuales, y luego vamos a pegarlas en su conjunto. Sin embargo, esto proporciona una forma de abstracción, porque podría cambiar la forma en que decido hacer de Todos individuales, y yo no tendría que cambiar alguna de este código. Eso es una especie de fresco. 

¿Alguien tiene alguna pregunta acerca de los marcos de JavaScript? [Pregunta inaudible Estudiante] Sí, claro, eso es una gran pregunta. La pregunta era ¿cómo me incluyo los marcos? La mayoría de los frameworks de JavaScript son básicamente js que se pueden incluir en la parte superior de su código. Observe que en la parte de cabeza de mi HTML tengo todas estas etiquetas de script, y la etiqueta de final de la escritura es el código que hemos escrito. Y entonces los códigos de marco 3 son también etiquetas de script. Estoy inclusión de lo que se llama un CDN, que me permite entiendo de otra persona en este momento pero cada marco tiene esta-se puede casi encontrar el contenido para una biblioteca de JavaScript en particular disponible en algunos CDN o algo así, y entonces usted puede incluir las siguientes etiquetas de script. ¿Eso tiene sentido? Genial. 

Esos son 2 enfoques diferentes. Esos no son los únicos enfoques para resolver este problema. Hay muchas cosas diferentes que alguien podría hacer, y hay muchos marcos por ahí. Angulares y Backbone no cuentan toda la historia. Buena suerte con sus proyectos finales, y muchas gracias. [CS50.TV]