Selecione a biblioteca correta
É muito difícil criar um aplicativo JS sem boas ferramentas. O JQuery é apenas uma biblioteca para operar DOM e não fornece nenhuma base para criar um aplicativo. É por isso que queremos uma biblioteca especial semelhante ao CANJS.
O CANJS é uma biblioteca MVC leve que fornece as ferramentas necessárias para criar um aplicativo JS.
O CANJS é uma biblioteca MVC leve que fornece as ferramentas necessárias para criar um aplicativo JS. Ele fornece uma estrutura básica com o modo MVC (modelo-View-Control), ligação ao modelo dinâmico, suporte de rota e segurança da memória. Ele também suporta jQuery, Zepto, Mootools, Yui, Dojo e tem extensões e plug-ins ricos.
Parte um você aprenderá:
Crie camadas de controle e visualização (modelos de interface do usuário) para exibir contatos
Use a camada modelo para representar dados
Use o plug -in de acessórios para simular o AJAX para retornar dados
Você deve estar animado! Vamos começar a codificar.
Crie suas pastas e html
Você primeiro cria uma pasta para o seu aplicativo e, em seguida, cria 4 subpastas no diretório: CSS, JS, Views e IMG. do seguinte modo:
contatos_manager
CSS
JS
visualizações
img
Salve o seguinte código como index.html:
A cópia do código é a seguinte:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Canjs Contacts Manager </ititle>
<link rel = "Stylesheet" href = "css/bootstrap.min.css">
<link rel = "Stylesheet" href = "css/contats.css">
</head>
<Body>
<div>
<div>
<div>
<H1> Contacts Gerenciador </h1>
</div>
</div>
<div>
<div>
<div>
<Nav id = "Filtro"> </Arn>
</div>
</div>
<div>
<div id = "create"> </div>
<div id = "contatos"> </div>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<script src = "js/can.jquery.min.js"> </script>
<script src = "js/can.fixture.js"> </script>
<script src = "js/contacts.js"> </script>
</body>
</html>
Na parte inferior da página, você carrega o JS necessário (incluindo seu aplicativo: contacts.js).
Os arquivos CSS e de imagem usados no tutorial podem ser baixados.
Use a vista para criar sua interface do usuário
A visualização é usada para renderizar o modelo da interface do usuário do seu aplicativo. O CANJS suporta uma variedade de motores de modelo. Este artigo usa o EJS, que inclui e suporta a ligação dinâmica.
As tags dos modelos EJS são muito semelhantes ao HTML e suporte contendo código JS. As três tags comumente usadas são as seguintes:
< % Code %> Executar JS
< %= Código %> Execute o JS e escreva resultados não escapados no HTML no local atual
< %== Código %> Execute o JS e escreva o resultado escapado para HTML no local atual (para subestimplates).
O modelo pode ser carregado a partir de um arquivo ou tag de script, e este tutorial é carregado de um arquivo EJS.
Mostre contatos
Para criar um contato, você deve criar um modelo EJS primeiro e salvar o seguinte código como contactSlist.ejs na pasta de visualizações:
A cópia do código é a seguinte:
<ul>
< % List (contatos, função (contato) { %>
<li < %= (el)-> el.data ('contato', contato) %>>
<%== can.view.render ('Views/contactView.ejs', {
Contato: Contato, Categorias: Categorias
}) %>
</li>
< %}) %>
</ul>
ContactLists.ejs renderizará uma lista de contatos. Vamos analisar este modelo:
A cópia do código é a seguinte:
< % List (contatos, função (contato) { %>
Se o método de retorno de chamada no método list () for usado em conjunto com a lista com o observador, ele será chamado repetidamente usando a ligação dinâmica assim que os dados da lista mudarem.
A cópia do código é a seguinte:
<li < %= (el)-> el.data ('contato', contato) %>>
O código acima gera um <li> com dados de contato através do método de retorno de chamada do elemento. Após o método após a execução da seta, os dados do objeto EL são definidos para o elemento correspondente.
A cópia do código é a seguinte:
<%== can.view.render ('Views/contactView.ejs', {
Contato: Contato, Categorias: Categorias
}) %>
O código acima renderiza o Sub-Template contactView.ejs em uma pessoa de contato. can.View.render () retorna HTML com modelo e dados como parâmetros.
Renderizar um único contato
As sub-titulações são uma boa maneira de organizar vistas em blocos gerenciáveis. Também torna seus modelos simples e fáceis de reutilizar. Este modelo será usado posteriormente no tutorial para criar um contato, salve o seguinte código como contactView.ejs e insira a pasta Views:
A cópia do código é a seguinte:
<a href = "javascript: //"> <i> </i> </a>
<morm>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<input type = "text" name = "name" placeholder = "Adicionar nome"
<%= contact.attr ('nome')? "Value = '" + contact.name + "'": "class = 'vazio'" %>>
<select name = "categoria">
< % $ .ECH (categorias, função (i, categoria) { %>
<opção value = "<%= category.data%>" <%= contact.category === category.data? "Selecionado": " %>>
< %= category.name %>
</pption>
< %}) %>
</leclect>
</div>
<div>
<bret> Endereço </belt>
<input type = "text" name = "endereço"
<%= contact.attr ('endereço')? "Value = '" + contact.address + "'": "class = 'vazio'" %>>
<Boel> Telefone </belt>
<input type = "text" name = "telefone"
<%= contact.attr ('telefone')? "value = '" + contact.phone + "'": "class = 'vazio'" %>>
<Boel> Email </elabel>
<input type = "text" name = "email"
<%= contact.attr ('email')? "Value = '" + contact.Email + "'": "class = 'vazio'" %>>
</div>
</div>
</morm>
Os atributos de contato são colocados na tag <input>, que permite editar e atualizar as informações do usuário.
Revitalize sua visão (boa literatura ..)
Se att () for usado durante o modelo de processamento EJS, o código em torno dele será entregue ao processador de eventos para monitorar as alterações nos atributos correspondentes. Quando os atributos mudarem, a interface do usuário associada no aplicativo será atualizada. Esta função se beneficia do mecanismo de ligação dinâmica do modelo. A ligação dinâmica do EJS é seletiva e só será ativada para os atributos correspondentes quando att () for usado.
Usamos uma tag <input> no contactView.ejs para entender seu uso:
A cópia do código é a seguinte:
<input type = "text" name = "name" placeholder = "Adicionar nome"
<%= contact.attr ('nome')? "Value = '" + contact.name + "'": "class = 'vazio'" %>>
O código na tag especial será convertido em um evento e vinculado ao atributo Nome deste contato. Quando o atributo do nome for alterado, o evento será acionado e a estrutura HTML será atualizada.
Use Can.Control para lidar com a lógica de negócios
O CAN.Control cria um controle total organizado, sem vazamentos, que pode ser usado para criar widgets ou lidar com a lógica de negócios. Você cria uma instância de controle para um elemento DOM através dos dados necessários e pode definir eventos de ligação ao método em seu controle.
Quando o elemento associado ao controle é excluído do DOM, o controle se destruirá e limpará o método ligado.
Para criar um controle, herde, passando no objeto que você definiu contendo a função para can.Control (). O próximo incidente também foi relatado.
Cada instância de controle tem vários valores e especificações de método importantes:
Referências a esta instância de controle
O elemento DOM que você criou nesta instância.
this.Options Parâmetro Objetos necessários para criar uma instância
init () é chamado quando a instância é criada com sucesso
Gerenciar contatos
Adicione o seguinte snippet de código ao arquivo contacts.js para criar um controle para o gerenciamento de contatos:
A cópia do código é a seguinte:
Contatos = can.control ({
init: function () {
this.Element.html (Can.View ('Views/ContactSlist.ejs', {
contatos: this.options.contacts,
Categorias: this.options.categorias
}));
}
})
Quando uma instância dos contatos é criada, o init () faz duas coisas:
Use can.view () para renderizar contatos. Can.View () recebe dois parâmetros: um arquivo que contém modelos e dados ou uma tag de tira; Ele retorna um documentFragment (um contêiner leve que gerencia elementos DOM).
Use jQuery.html () para inserir o documentalfragment de can.view () no elemento do controle
Use o modelo para representar dados
O modelo é a camada abstrata de dados de aplicativos. Este aplicativo usa dois modelos: um correspondente à pessoa de contato e a outra correspondente à categoria. Adicione o seguinte código ao contacts.js:
A cópia do código é a seguinte:
Contato = can.model ({
FindAll: 'Get /Contatos',
Criar: "Post /contatos",
ATUALIZAÇÃO: "PUT /CONTACTS /{ID}",
Destroy: "Excluir /contatos /{id}"
}, {});
Categoria = can.model ({
FindAll: 'Get /Categorias'
}, {});
Um modelo possui 5 métodos que podem definir dados CRUD, ou seja, encontrar, encontrar, criar, atualizar e destruir. Você pode reescrever esses métodos, mas a melhor maneira é usar o serviço REST (transferência de estado representacional). Assim como o código acima, você pode se preocupar em ignorar os métodos estáticos que não serão usados no aplicativo.
É importante ressaltar aqui que a instância do modelo é realmente 'observável' do CANJS. Can.observe fornece o padrão de observador de um objeto pode.observe.list fornece o padrão de observação de uma matriz. Isso significa que você pode obter e definir dados através do attr () enquanto ouve alterações nos dados.
O método findall () retorna um modelo.list, que é o evento acionado pelo can.observe.list quando o elemento é adicionado ou removido.
Use acessório para imitar descanso
O equipamento intercepta solicitações do AJAX e simula a resposta através de arquivos ou métodos. Isso é muito útil para testes ou quando o back -end não estiver pronto. O acessório é o que o modelo de aplicativo simula o REST.
Primeiro, você precisa preparar alguns dados para fixar e adicionar o seguinte código a:
A cópia do código é a seguinte:
var contatos = [
{
ID: 1,
Nome: 'William',
Endereço: '1 Canjs Way',
E -mail: '[email protected]',
Telefone: '0123456789',
Categoria: 'colegas de trabalho'
},
{
ID: 2,
Nome: 'Laura',
Endereço: '1 Canjs Way',
E -mail: '[email protected]',
Telefone: '0123456789',
Categoria: 'Amigos'
},
{
ID: 3,
Nome: 'Lee',
Endereço: '1 Canjs Way',
E -mail: '[email protected]',
Telefone: '0123456789',
Categoria: 'Família'
}
];
categorias var = [
{
ID: 1,
Nome: 'Família',
Dados: 'Família'
},
{
ID: 2,
Nome: 'Amigos',
Dados: 'Amigos'
},
{
ID: 3,
Nome: 'colaboradores',
Dados: 'colegas de trabalho'
}
];
Com os dados, conecte -os ao acessório para simular o descanso. can.fixture () recebe dois parâmetros. O URL que queremos interceptar e os arquivos e métodos aos quais respondemos. Normalmente, os URLs que você deseja interceptar são dinâmicos e seguem um padrão. Basta adicionar curingas fechadas com {} no URL.
Adicione o seguinte código ao contacts.js:
A cópia do código é a seguinte:
can.fixture ('get /contatos', function () {
retornar [contatos];
});
var id = 4;
can.fixture ("post /contatos", function () {
return {id: (id ++)}
});
can.fixture ("put /contatos /{id}", function () {
retornar {};
});
can.fixture ("excluir /contatos /{id}", function () {
retornar {};
});
can.fixture ('get /categorias', function () {
retornar [categorias];
});
Os quatro primeiros acessórios simulam o GET, POST, PUT e excluem respostas do modelo de contato, e o quinto simula a resposta GET do modelo de categoria.
Inicie o aplicativo
Seu aplicativo possui um modelo que gerencia dados, renderiza as visualizações de contatos e organiza tudo isso em controle. Tudo o que você precisa fazer agora é iniciar o aplicativo. Agora você precisa iniciar o aplicativo!
Adicione o seguinte código ao contacts.js:
A cópia do código é a seguinte:
$ (document) .ready (function () {
$ .When (category.findall (), contact.findall ()). Então (
function (categoryResponse, contactResponse) {
categorias var = categoryResponse [0],
contatos = contactResponse [0];
novos contatos ('#contatos', {
Contatos: Contatos,
Categorias: Categorias:
});
});
});
Vamos analisar este código:
A cópia do código é a seguinte:
$ (document) .ready (function () {
Use o método jQuery.ready para ouvir o pronto para o DOM.
A cópia do código é a seguinte:
$ .When (category.findall (), contact.findall ()). Então (
function (categoryResponse, contactResponse) {
Ligue para o método findall () de dois modelos para obter os tipos de todos os contatos. Como o findAll () tem um atraso, $ .hen () garante que o método de retorno de chamada seja executado somente após a conclusão das duas solicitações ao mesmo tempo.
A cópia do código é a seguinte:
categorias var = categoryResponse [0],
contatos = contactResponse [0];
Obtenha o conjunto de dados da instância do modelo correspondente dos dois métodos findall (). é o primeiro elemento da matriz retornado pela resposta.
A cópia do código é a seguinte:
novos contatos ('#contatos', {
Contatos: Contatos,
Categorias: Categorias:
});
Cria um controle do contato para o elemento #Contacts. Os conjuntos de dados de contato e tipo são enviados para controle.
Abra seu aplicativo com um navegador e você verá a seguinte lista de contatos:
Resumir
Este é o primeiro capítulo da série tutorial, e você já aprendeu sobre o núcleo do CANJS:
Modelos camada de abstração dos dados do seu aplicativo
Visualizações modelos que convertem dados em html
As organizações controlam se relacionam com tudo