[Powered by Google Translate] [Seminário] [frameworks JavaScript: Por que e como]
[Kevin Schmid] [Harvard University]
[Isto é CS50.] [CS50.TV]
>> Oi, pessoal. Bem-vindo ao seminário Frameworks JavaScript.
Meu nome é Kevin, e hoje eu vou estar falando sobre frameworks JavaScript,
eo objetivo deste seminário é não levá-lo a, digamos, dominar um quadro especial, por si só
mas para dar-lhe uma ampla introdução a um par de quadros
e mostrar por que iria querer usar um framework.
>> Antes de eu fazer isso, eu vou dar um pouco de fundo em JavaScript,
e depois vamos levá-lo de lá.
Vamos começar por implementar uma lista de coisas a fazer.
Aqui está a nossa lista de tarefas para hoje.
É meio engraçado. Temos que implementar uma lista de coisas a fazer em JavaScript.
Isto é o que ele vai parecer, para que o nosso primeiro objetivo.
Nós não estamos indo para usar uma estrutura para fazer isso.
Vamos ao código JavaScript e obter a lista de coisas a fazer para o trabalho.
Então vamos melhorar o design sem usar um framework.
Nós vamos discutir várias coisas que podemos fazer apenas sozinho com JavaScript
para tornar a nossa lista de tarefas um pouco mais bem desenhado.
Então vamos jogar em algum jQuery,
e, em seguida, vamos olhar para a mesma lista de coisas a fazer,
apenas implementada em diferentes contextos, e nós vamos discutir
os prós e contras ao longo do caminho.
>> Vamos começar a implementar essa lista de coisas a fazer.
Vamos dizer que nós estamos dando este HTML.
Eu vou fazer isso um pouco menor.
Como você pode ver, eu tenho um pouco de cabeçalho que diz Todo
e uma pequena caixa onde eu possa entrar uma descrição de um TODO
e, em seguida, um novo botão de ponto, então vamos tentar entrar em um novo TODO a esta lista.
Dê um seminário de quadros JavaScript,
e eu sou a bater novo item.
Recebo este alerta JavaScript que diz implementar mim.
Nós temos que implementá-lo.
Vamos verificar o código para isso, tanto o HTML e JavaScript.
Aqui está o nosso HTML.
Como você pode ver aqui, aqui é o nosso pequeno cabeçalho Todos.
Que era aquela coisa negrito no topo,
e, em seguida, temos a caixa de entrada com o espaço reservado,
e, em seguida, há um certo atributo desse botão que chama essa função addtodo.
Alguém quer adivinhar o que é que significa no clique?
[Student resposta inaudível]
Bom, sobre o clique é como uma espécie de evento,
como clicar o mouse é apenas um evento, eo que nós estamos fazendo
é nós estamos amarrando o evento de clicar neste botão para executar essa função.
Addtodo é esse manipulador de eventos para clicar nesse botão.
>> Como você pode ver, quando eu clico no botão novo item
o evento click on é demitido, e esta função é chamada.
Vejamos função.
Como você pode ver, aqui está o meu código JavaScript até agora.
O que eu tenho no topo é uma estrutura de dados global para a minha lista de coisas a fazer.
Parece um array. É apenas um conjunto vazio.
E então eu tenho a função addtodo que vimos anteriormente,
ea única linha de código em que há este alerta.
Ele alerta implementar mim, e então eu tenho duas tarefas na mão.
Tenho de acrescentar o TODO para que a estrutura de dados global,
e então eu quero chamar a lista de coisas a fazer.
Nada muito extravagante ainda, mas JavaScript você pode estar familiarizado com,
então eu vou ir devagar e rever os fundamentos de JavaScript dessa maneira.
>> Vamos dar a este um tiro.
Digamos que o usuário digita algo na caixa.
Eu digitei algo aqui, texto.
Como posso classificar de acesso que o texto através de JavaScript?
Lembre-se de que o JavaScript, uma de suas características fundamentais é que ele nos dá
este acesso programático para o DOM.
Ela nos permite acessar os elementos e suas propriedades desta HTML real.
A maneira de fazer isso com bare ossos JavaScript
é que podemos realmente usar uma função JavaScript chamada GetElementById.
Eu quero armazenar o texto que está escrito lá em alguma variável,
então eu vou dizer uma nova variável chamada new_todo,
e eu vou pegar esse elemento.
Esta é uma função,. GetElementById.
E agora eu estou recebendo um elemento por ID, então eu preciso do ID de que a caixa de texto,
então eu dei-lhe o new_todo_description ID.
É assim que eu estou indo para obter um elemento.
Esse é o meu argumento para esta função, para especificar qual ID de obter.
E isso é um elemento HTML, e tem propriedades.
Você já viu isso. São atributos.
O atributo do elemento de texto que armazena a entrada do usuário é chamado de valor.
Salvei o valor da caixa de texto que agora nesta variável chamada new_todo.
Agora eu tenho acesso programático a esta variável, o que é legal
porque agora o que posso fazer é que eu posso adicioná-lo à minha lista de coisas a fazer.
>> A forma como faríamos isso em JavaScript e não se preocupe se você não estiver familiarizado com isso,
mas apenas passando por isso é todos.push
porque esse é o nome da minha estrutura de dados global, aqui em cima,
e eu estou indo para empurrar new_todo.
Isso é ótimo, porque agora eu adicionei ao meu JavaScript
representação da lista de coisas a fazer.
Mas agora, como faço para obtê-lo de volta para o HTML?
Eu tenho que encontrar uma maneira de classificar de empurrá-lo de volta.
Em outras palavras, eu meio que tenho que tirar isso.
O que nós vamos fazer é que vamos desenhar a lista de coisas a fazer.
Eu preciso atualizar outro HTML na página,
e como você pode ver, eu deixei a embalagem pouco aqui,
este divisor da página cujo ID é de Todos,
e eu vou colocar a lista de coisas a fazer lá.
Primeiro eu vou limpá-lo, porque, por exemplo, havia uma velha lista de coisas a fazer lá.
Estou recebendo esse elemento por ID de novo,
e eu estou acessando o HTML interior desse elemento,
e eu vou limpar isso.
Se deixamos este código como está, nós veríamos um nada em branco lá,
e agora quero começar a prestar a minha nova lista de coisas a fazer.
Estou basicamente vai acabar com a minha lista de coisas a fazer.
>> Agora o interior HTML interno do que Todos div é totalmente clara,
e agora eu preciso para começar a adicionar a minha lista.
A primeira coisa que eu quero é voltar a adicionar a tag lista não ordenada,
que basicamente indica que este é o início de uma lista ordenada.
Agora, para cada elemento da minha matriz Todos Quero imprimi-lo dentro desse HTML.
Eu quero acrescentar que para o final da lista.
Assim como em C, eu posso usar um loop for, e eu vou começar no início da minha lista
no elemento 0, e eu estou indo para ir todo o caminho até o comprimento da lista.
Nós podemos realmente obter o comprimento de uma matriz em JavaScript usando a propriedade length.
Basicamente, eu vou fazer algo muito parecido aqui dentro
para imprimir esse elemento.
Eu posso acessar novamente o div Todos, a propriedade HTML interior que,
e eu estou indo para adicionar este novo item da lista, e que vai estar rodeado por
esta tag li, e eu estou indo para concatenar com o operador +,
e esse é o elemento i do meu leque de Todos,
e então eu vou fechar essa tag.
Agora, para cada elemento, vamos adicionar uma nova entrada na lista.
E então tudo o que realmente precisa fazer é fechar essa marca.
Eu só preciso fechar esse tag desordenadas lista.
>> Você ter uma idéia de como isso funciona?
Isso abre a lista inteira.
Isso adiciona elementos individuais da lista Todos da lista,
e, em seguida, que fecha a lista inteira, e esta é a minha função addtodo.
Eu, basicamente, começar por obter o TODO da caixa de texto.
Devo acrescentar que, para a matriz de Todos, e então eu re-processar a lista de coisas a fazer.
Agora eu posso adicionar itens a minha lista.
Isso é muito empolgante porque em apenas algumas linhas de código
temos, basicamente, fez uma lista de coisas a fazer, onde podemos adicionar itens.
Grande.
Esse é um tipo de uma introdução básica à JavaScript.
Não se preocupe muito com a sintaxe, por agora,
mas pensar sobre isso conceitualmente.
Tivemos um pouco de HTML.
Tivemos uma caixa de texto na página que basicamente permitiu que os usuários inserir um item para-fazer para adicionar.
E então usamos JavaScript para buscar que TODO de que a caixa de texto.
Nós armazenado que dentro de uma matriz JavaScript, que é basicamente como
nossa representação programática dessa lista de coisas a fazer,
e, então, imprimiu.
Isto é todos.js.
>> Isso é legal, mas como podemos levar isso adiante?
Bem, como você pode ver, isto não é como uma completa lista de coisas a fazer.
Por exemplo, eu não posso marcar qualquer um desses itens como incompleta,
como se eu queria priorizar os itens ou excluir itens.
Isso é bom, mas nós podemos levar isso adiante.
Eu não vou falar muito sobre a adição de recursos extras,
mas podemos levar isso adiante.
Vamos falar sobre a adição de mais um recurso para essa lista de coisas a fazer,
que vai ser ser capaz de verificar um indivíduo a fazer ponto
e tê-lo ser barrado, então, basicamente dizendo que eu fiz isso.
Vamos dar uma olhada em algum código que pode conseguir isso.
Observe o que eu fiz no topo é que eu adicionei
uma nova matriz global chamado completa.
Estou basicamente usando isso para se armazenar os itens da lista de coisas a fazer
estão completos ou não.
Esta é uma maneira de fazer isso.
Se eu olhar para a implementação deste, o display,
basicamente, se eu digitar um TODO e eu pressionar este botão de alternância
cruza para fora, de modo que cada item desta lista tem ou uma completa
ou estado incompleto, e eu estou usando outro array para representar isso.
>> Basicamente, para todos os afazeres do array Todos
há um item na matriz completa que, basicamente, indica
se é completo ou não.
Eu tive que fazer mudanças bastante mínimas para este código,
isso aqui é a nossa função addtodo.
Repare que aqui eu estou empurrando-o para a matriz,
e então eu estou empurrando a 0 para essa matriz completa,
basicamente, em paralelo com o novo impulso TODO dizer
Eu estou adicionando este item, e é juntamente com este valor,
o que significa que é incompleto.
E então eu estou redesenhando a lista de coisas a fazer.
Agora, notem que eu adicionei essa função drawTodoList.
Isso leva um monte de código que tínhamos antes,
basicamente limpa o caixa e, em seguida, chama a nova lista de coisas a fazer.
Mas note que dentro deste loop que estamos fazendo um pouco mais agora.
Estamos, basicamente, verificar se o item correspondente ao TODO om aqui
está completa, e nós estamos comportando de maneira diferente nesses dois casos.
Se ele é completo, estamos adicionando esta tag del,
que é basicamente a maneira que você pode começar a greve através de efeito
riscando da lista de coisas a fazer, se é completa,
e se não for, não vamos incluí-la.
E assim, esse tipo de cuida disso,
>> e essa é uma maneira de conseguir isso.
E, em seguida, perceber quando o usuário clica em um desses
que alternar o status de conclusão do mesmo.
Quando o usuário clica, vamos inverter se ele foi concluído ou não,
e depois vamos redesenhá-lo.
Este tipo de obras.
Temos essas funções que exercem as suas próprias tarefas,
e isso é bom.
Existe alguma coisa que poderia fazer melhor sobre isso, então?
Observe que temos essas duas matrizes globais.
Se este era C, e tivemos duas matrizes que tipo de representadas
dados que foi uma espécie de relacionados de alguma forma
o que nós usamos em C para combinar esses dois campos
em algo que encapsula os dois pedaços de informação?
Alguém quer fazer uma sugestão?
[Student resposta inaudível]
>> Exatamente, por isso, poderia usar algum tipo de estrutura,
e se você acha que volta para, digamos, pset 3,
lembro que tinha dicionário, e depois tivemos se a palavra
Foi no dicionário, e todas as informações que foi colocado junto
dentro de uma estrutura de dados.
Uma coisa que eu posso fazer com esse código para evitar que estas duas matrizes diferentes
para peças semelhantes de informações é que eu posso combiná-los em um objeto JavaScript.
Vamos dar uma olhada nisso.
Repare que eu só tenho uma matriz no topo agora
eo que eu tenho feito é, e isto é apenas a sintaxe JavaScript para tipo de
a criação de uma versão literal de um objeto,
e notar que há duas propriedades, por isso temos o todo,
e ele é mantido em conjunto com se é completo ou incompleto.
Este código é muito semelhante.
Estamos usando os objetos JavaScript.
Este tipo de coisas melhore.
Como agora, todos esses campos de informações relacionadas são mantidos juntos.
Quando vamos para imprimi-lo, podemos acessar os campos.
>> Observe como estamos fazendo Todos [i]. Completo
em vez de verificar o conjunto completo separadamente
e perceber quando queremos obter a seqüência de tarefas que estamos recebendo a propriedade de coisas a fazer
desse todo, de modo que este tipo de faz sentido, porque
cada item tem essas propriedades intrínsecas sobre o assunto.
Tem um todo, e tem se é completa ou não.
Não há muitas mudanças funcionalmente, acabou de adicionar um pouco mais para o código.
Esta é uma melhoria em algumas frentes, certo?
Quero dizer, nós consignado o design um pouco.
Agora temos objetos para encapsular basicamente esses dados.
Existe algo mais que podemos fazer daqui em termos de JavaScript?
Como aviso de que este código aqui
para obter o HTML interior de uma div
é um pouco, eu acho, por muito tempo.
Há document.getElementById ("todos"). InnerHTML.
Uma coisa que poderia fazer para tornar este código olhar um pouco mais amigável
então eu não teria que manter a rolagem esquerda e direita, frente e para trás,
é que eu poderia usar uma biblioteca como jQuery.
>> Vamos verificar Seminário 2,
e este é o mesmo código, mas é feito com jQuery.
Você pode não estar muito familiarizado com jQuery,
mas só sei que jQuery é uma espécie de biblioteca de JavaScript
que torna mais fácil fazer coisas como acessar os elementos individuais do DOM.
Aqui, em vez de dizer document.getElementById ("todos"). InnerHTML
Eu posso usar a forma mais limpa em jQuery,
que é apenas para usar seletores.
Como você pode ver, este código fez um pouco mais limpo,
muito similar funcionalmente, mas essa é a idéia.
Nós vimos um par de coisas, até agora,
então começamos com a implementação JavaScript apenas cru.
Nós adicionamos novos recursos e mostrou como podemos melhorá-lo com
apenas o que temos em JavaScript.
>> Alguém vê alguma dificuldade com este projeto?
Ou seja, eu acho ou não, necessariamente, dificuldades, mas vamos dizer
não estávamos fazendo um projeto de lista de coisas a fazer, e amanhã nós decidimos
queríamos fazer uma lista de compras ou um projeto de lista de compras.
Muitas dessas características são muito semelhantes.
Um monte de coisas que queremos sair de JavaScript são muito comuns,
e isso reforça a necessidade de algum tipo de meio de
tornar isso mais fácil de fazer.
Eu tive que construir tudo isso acesso HTML, tudo isso de acesso DOM,
como eu vou para representar a lista de coisas a fazer com este modelo.
E repare que eu sou responsável como o desenvolvedor JavaScript
para manter o código HTML e JavaScript que eu tenho em sincronia.
Nada feito automaticamente essa representação JavaScript
ou a lista de coisas a fazer são empurrados para HTML.
Nada forçado que, exceto para mim.
Eu tinha que escrever o sorteio de coisas a fazer a função de lista.
E isso não pode ser, eu quero dizer, é razoável fazer isso,
mas pode ser tedioso às vezes.
Se você tem um projeto maior, que poderia ser difícil.
>> Frameworks, um dos propósitos de frameworks
é simplificar esse processo e tipo de fator fora
estes common-Eu acho que você poderia dizer-padrões de design
que as pessoas geralmente têm algum tipo de forma de representação de dados,
se isso é uma lista de amigos, se isso é informação do mapa
ou algo assim ou uma lista de coisas a fazer.
Algumas pessoas têm geralmente uma forma de representação da informação,
e eles geralmente precisam manter esse tipo de informação em sincronia
entre o que o usuário vê em algum tipo de ponto de vista,
falando em termos de como o controlador de vista do modelo que você viu na aula,
e, em seguida, o modelo, o que, neste caso, essa matriz é JavaScript.
Frameworks dar-nos uma maneira de resolver esse problema.
Agora vamos dar uma olhada na implementação da lista de coisas a fazer
em um quadro chamado angularjs.
É isso. Observe que ele se encaixa em um slide.
Eu não tenho a rolar para a esquerda e para a direita.
Isso provavelmente não é um grande motivo para recomendar o uso de um quadro,
mas aviso que estou sempre acessando elementos HTML individuais aqui?
Estou sempre indo para o DOM?
Você vê alguma document.getElementById ou algo parecido?
Não, isso é passado.
>> Angular nos ajuda a manter o DOM e JavaScript nossa representação de algo
tipo de em sincronia, por isso, se não é no arquivo js,
se não há nenhuma maneira de programação começando a todo o conteúdo HTML
do JavaScript como vamos manter isso em sincronia?
Se não está no arquivo js., Ele tem que ser em HTML, certo?
Esta é a nova versão do arquivo HTML,
e notar que nós adicionamos um monte aqui.
Observe que há esses novos atributos que dizem ng-click e ng-repeat.
A abordagem da Angular para resolver este problema de dificuldades na concepção
é, basicamente, fazer HTML muito mais poderoso.
Angular é uma forma de permitir que você faça HTML um pouco mais expressivo.
Por exemplo, eu posso dizer que eu vou amarrar ou ligar esta caixa de texto
para uma variável dentro do meu código JavaScript Angular.
Este modelo ng faz exatamente isso.
Que basicamente diz que o interior desta caixa de texto do item,
só associar isso com o new_todo_description variável
dentro do código JavaScript.
Isso é muito poderoso, porque eu não tenho que ir explicitamente
o DOM para obter essa informação.
Eu não tenho que dizer document.getElementById.
Eu não tenho de usar jQueries como acesso à DOM.
Eu posso associá-lo a uma variável, e então quando eu mudar essa variável
dentro de JavaScript é mantido em sincronia com o HTML,
para que simplifica o processo de ter que ir e voltar entre os dois.
Será que isso faz sentido?
>> E notem que não há código de acesso HTML.
Acabamos fez HTML mais poderoso,
e agora, por exemplo, podemos fazer coisas como esta,
como quando você clicar sobre isso, chamar essa função no âmbito da todos.js,
e nós poderíamos fazer isso antes, mas há outras coisas, como esta ng-modelo,
e perceber isso ng-repeat.
O que você acha que isso faz?
Aqui está a nossa lista não ordenada de antes.
Temos as tags ul,
mas estou sempre prestando essa lista dentro do código JavaScript?
Eu não estou sempre prestando explicitamente essa lista.
Como isso funciona?
Bem, a maneira angular faz isso por isso é chamado de repetidor.
Basicamente, este diz que eu quero imprimir este HTML
para todos os afazeres dentro do meu leque de Todos.
Dentro de todos.jr existe uma matriz Todos aqui,
e isso vai contar go Angular através dessa matriz e para cada elemento que você vê
Eu quero que você imprima este HTML.
Este é o tipo de incrível, porque eu só posso fazer isso
sem ter que escrever um loop for,
que para uma lista de coisas a fazer que era de apenas 30 linhas de código
pode não ser o mais vantajoso,
mas se você tiver um projeto grande, isso pode ficar muito conveniente.
>> Esta é uma solução para este problema, tornando HTML mais poderoso,
e que nos permite manter JavaScript e HTML em sincronia.
Há outras maneiras possíveis para resolver este problema,
e não cada framework faz isso.
Nem todo quadro funciona ao longo destas linhas.
Alguns quadros têm abordagens diferentes,
e você pode achar que você gosta de codificação em um quadro sobre o outro.
Vejamos mais um.
Esta é a lista de coisas a fazer codificado em um quadro chamado Backbone.
Eu vou passar por isso rapidamente.
Vou começar com o HTML antes de irmos para lá.
Um segundo.
Começando com o HTML, como você percebe, o nosso HTML é muito semelhante
ao que era antes, então não é muito novo nessa frente.
Mas o nosso arquivo js é um pouco diferente.
Backbone meio que tem essa idéia, ou se baseia na idéia
que muito do que fazemos com, digamos, nossos projetos de JavaScript
é pensar sobre os modelos e coleções destes modelos.
Isto poderia ser, por exemplo, uma fotografia e colecções de fotos
ou a idéia de um amigo e coleções de amigos.
E muitas vezes quando estamos programando aplicações JavaScript
nós vamos resolver de representar a idéia de ter uma coleção de amigos
de alguma forma em JavaScript, e Backbone nos dá essa camada
em cima de matrizes e objetos existentes do JavaScript
para fazer coisas mais poderosas com que mais facilmente.
>> Aqui eu defini um modelo de tarefas,
e você não tem que se preocupar muito com a sintaxe,
de notar que o que é uma das propriedades deste?
Tem um campo padrão.
Backbone permite-me já para especificar fora do bastão
qualquer novo para-fazer que eu criar vai ter esses padrões.
Agora eu posso personalizar isso, mas ser capaz de especificar os padrões
é bom, e é uma espécie de conveniente, porque isso não é algo que é como
inerente JavaScript, e agora eu não tenho que explicitamente
dizer que os Todos estão incompletos.
Posso dizer logo de cara que Todos vão ser marcadas como incompletas.
Observe então o que é isso?
Agora eu tenho uma lista de coisas a fazer, e isso é uma coleção.
Observe o campo associado que diz que modelo do todo.
Esta é a minha maneira de dizer que Backbone
Eu vou estar pensando em uma coleção desses Todos individuais.
Esta é basicamente a estrutura do modelo para o meu programa.
Aqui eu tenho essa idéia de uma coleção,
e, basicamente, os itens contidos nessa coleção são todos que vão ser estes Todos,
e que é muito natural, neste sentido
porque eu tenho Todos, e eu tê-los em uma coleção.
>> Vamos olhar um pouco mais disso.
Aqui está uma visão Backbone.
A outra coisa que diz é que Backbone
um monte de modelos que você está pensando sobre coleções ou mesmo
vão precisar de ter alguma forma de ser exibido.
Precisamos tornar essa lista de coisas a fazer,
e não seria bom se pudéssemos fornecer para cada modelo
ou associar-se com cada modelo este ponto de vista
que nos permite Acho que ligar os dois juntos?
Considerando que, antes tivemos que usar um loop for que atravessaria
todos os afazeres em nossa lista e, em seguida, imprimi-lo aqui
podemos basicamente conectá-lo com este modelo.
Esta é uma visão de coisas a fazer.
Isto está associado com o TODO encontramos anteriormente.
Agora, todos os afazeres é exibível ou renderizável
por esse ponto de vista a fazer.
Observe alguns dos campos.
O que você acha que isso é tagName, tagName: li?
Lembre-se de antes quando queríamos tornar um TODO
teríamos de emparelhar explicitamente nossos Todos com esta tag li.
Agora estamos dizendo que onde esta TODO vai viver
vai estar dentro de uma tag li.
E agora também estamos associando eventos com nossos Todos.
>> Cada TODO tem este evento.
Se você clicar praticamente o botão de alternância, que é o que eu estou dizendo que,
então basicamente marcar o TODO como o oposto do que era antes
e então re-tornar a aplicação.
Esta é uma espécie de similar ao código antes.
Lembra-se quando marcou como quer o oposto, ou-
e, então, re-processado-lo.
Mas observe agora este evento costumava ser uma coisa que estava no HTML.
Ele estava sentado lá.
O botão tinha um clique em.
Quando você clica no botão, ele faz o tipo de material para
configurado que TODO ser incompleto.
Aqui temos associado o evento de clicar no botão de alternância
e reversão seja ligado ou desligado com essa visão.
>> Esta é uma boa maneira de criar esse evento para que ele seja muito bem obrigado
este ponto de vista, e assim perceber isso mais um.
Eu tenho este método render, e não temos para passar os detalhes.
É meio parecido com o que tínhamos antes,
mas repare que eu não estou looping através de qualquer coisa.
Eu não estou a impressão de que tag ul que é uma espécie de dizer que vou imprimir todos os elementos.
Eu estou oferecendo a funcionalidade para tornar este um item de tarefa.
Este é um conceito muito poderoso, porque, basicamente,
nossa lista de coisas a fazer é composta por todos esses Todos, e se podemos basicamente especificar
o modo para processar um daqueles Todos
então podemos ter a nossa poderosa backbone per se tornar toda a Todos
chamando o método render nas Todos individuais.
Este é um conceito que é útil aqui.
Agora, uma boa pergunta é como é que esta aplicação a ser colocados juntos?
Porque nós temos a capacidade de tornar um todo,
mas como é que vamos ficar com a ideia de múltiplas Todos?
>> Vamos dar uma olhada nisso.
Esta é a última parte.
Observe que temos uma visão de lista de coisas a fazer aqui,
e observe também é um ponto de vista.
E para passar por cima de algumas coisas,
este método initialize será chamado quando nos criar esta lista de coisas a fazer.
Como você pode ver, é como criar a lista de coisas a fazer e associá-lo com essa visão.
E então eu adicionei as funções aqui, então, basicamente, quando você adicionar um item-
isto é semelhante ao método addItem se viu antes,
Vou criar um novo objeto todo, e notar que eu realmente estou chamando
este novo método todo, de modo que este é fornecido pela Backbone,
e eu posso passar em minhas propriedades aqui.
E agora todos os afazeres que cria usando este vai ter essa funcionalidade que vimos antes.
Repare que eu estou limpando a caixa de texto antes de um pequeno detalhe pequeno-
e então eu estou adicionando esta coleção.
>> Isto quase parece estranho, porque antes nós apenas tivemos que fazer isso todos.push,
e depois que foram feitas, e isso pode parecer mais complicado para este projecto específico,
e você pode achar que Backbone ou mesmo angular ou qualquer outra estrutura
não se adequar ao seu projeto particular, mas eu acho que é importante pensar sobre
o que isso significa em maior escala para projetos maiores,
porque se tivéssemos um projeto maior onde estávamos representando
uma coleção realmente complexo, algo mais profundo do que apenas uma lista de coisas a fazer,
digamos que uma lista de amigos, ou algo assim, isso poderia vir a calhar
porque poderíamos organizar nosso código de uma forma muito conveniente,
de uma forma que tornaria mais fácil para alguém
que queria pegar um projeto para construir em cima.
Você pode ver que esta fornece uma grande quantidade de estrutura.
E então eu estou chamando tornar este addItem.
Render, como você pode ver, e você não tem que agarrar esta sintaxe completa,
mas, basicamente, para cada modelo que vai chamar o método render individual.
Isso é uma espécie de onde isso vem.
Vamos apenas especificar como renderizar Todos os individuais,
e, em seguida, vamos colá-los em conjunto, como um todo.
Mas isso proporciona uma forma de abstração,
porque eu poderia mudar a maneira que eu decidir tornar Todos os individuais,
e eu não teria que mudar qualquer código.
Isso é legal.
>> Alguém tem alguma dúvida sobre frameworks JavaScript?
[Student pergunta inaudível]
Oh, com certeza, essa é uma ótima pergunta.
A questão era como se eu incluir os quadros?
A maioria dos frameworks JavaScript são basicamente apenas js
que você pode incluir no topo do seu código.
Observe na parte da cabeça do meu HTML eu tenho todas essas tags de script,
ea marca final de script é o código que você escreveu.
E então os três códigos de enquadramento são apenas também tags de script.
Estou incluindo-los de que é chamado de CDN,
o que me permite fazê-lo de outra pessoa neste momento
mas cada quadro tem essa, você pode muito bem encontrar o conteúdo
para uma biblioteca JavaScript especial disponível em alguns CDN ou algo parecido,
e então você pode incluir essas tags de script.
Será que isso faz sentido?
Legal.
>> Essas são duas abordagens diferentes.
Essas não são as únicas abordagens para resolver este problema.
Há muitas coisas diferentes que
alguém poderia fazer, e há muitos quadros lá fora.
Angular e Backbone não contam toda a história.
Boa sorte com seus projetos finais, e muito obrigado.
[CS50.TV]