ajax ops

Operações declarativas de Ajax

Sua maneira mais fácil mais fácil de ter um aplicativo da Web de uma única página sem linha única de código JavaScript.

Demoção ao vivo

Demoção ao vivo

Executando a demonstração

A demonstração é apenas arquivos estáticos, você pode colocar este diretório no seu servidor de documento Root ou apenas digite o seguinte comando que iniciará um servidor HTTP simples na porta 8000 e aponte seu navegador em http: // lochost: 8000/index.html

python -m SimpleHTTPServer

Convenções

• el - Dom elemento
• $target - um objeto jQuery do elemento DOM target
• where pode ser um dos: closest , inside ou doc .
• how pode ser um dos: prepend , append ou replace

Uso declarativo

 < a data-toggle =" ajax-load " href =" /posts/today.json " data-target =" .posts " > my link </ a >
< button type =" button " data-toggle =" ajax-ops " > my button </ a >
< div class =" me " data-refresh-url =" /user/me.json " data-template =" user_info " > </ div >
< div class =" posts " data-template =" posts_titles " > </ div >
< div class =" posts " data-template =" full_posts " > </ div >

você pode definir

• data-toggle
  • ajax-load - texto buscado, conteúdo html ou dados puros e aplique -os ao (s) alvo (s)
  • ajax-ops -busca codos de operação JSON
  • ajax-modal * requer extensão
• data-target - o seletor para aplicar o conteúdo buscado a ele
• data-url (que às vezes pode ser substituído por href ou data-refresh-url )
• data-template - O modelo a ser usado para renderizar dados puros
• data-format - pode ser text , html ou json
• data-how - pode ser um de: prepend , append ou replace

Modelos são funções que pegam objeto JSON e retornam HTML Você pode usar qualquer mecanismo de modelo, mas sugerimos o guidão

Referência

• ajax_ops.flashmsg({html:, text:, type:info|danger, selector:, base_target:$obj, where:closest|inside|''})
  • Exibir informações ou caixa de aviso usando o modelo chamado 'flashmsg' dado texto ou html e digite
  • ajax_ops.flashmsg({text:'not found', type:'danger');
  • ajax_ops.flashmsg.call(this, {text:'not found', type:'danger', selector:'.modal', where:'closest'});
  • afetado por self.flashmsg_opts.selector que é .content:first
• onsubmit="return ajax_ops.submit_form(this, params);"
  • params são opcionais
  • params.target=$obj
  • params.cb=function($target, data){}
• ajax_ops.loads({html: CONTENT, text: CONTENT, data: JSON, template: NAME, el: ELEMENT, how: prepend|append|replace})
  • ajudante para carregar dados html, textos ou modelos em um elemento com uma opção para anexá -los ou prendê -los
• ajax_ops.load({el:element, url:, how: prepend|append|replace, selector:, where:closest|inside|, })
• ajax_ops.refresh(element|selector, params)
  • params são opcionais
  • params.where
  • params.base_element
  • usa ajax_ops.load e aceita seus parâmetros como how
  • exemplo ajax_ops.refresh('.me')
• ajax_ops.exec_ops([ [op1, selector1, params1], [op2, selector2, params2],.. ])
  • as operações podem ser
    • remove
    • refresh
    • load
    • attr {set:{k:v}, unset:[k1,k2]}
    • class {add:[], remove:[], toggle[]}
    • Pode -se estender com mais operações adicionando ajax_ops.ops['my_opcode']=function(el, params){}

Notas:

 // register templates
ajax_ops . templates = Handlebars . templates ;
// nice hack
Handlebars . partials = Handlebars . templates ;
// You might want to disable usual links behavior 
$ ( 'a[data-toggle]' ) . click ( function ( e ) { e . preventDefault ( ) } ) ; 

Direitos autorais e licença

Copyright 2014 Muayyad Alsadi

Licenciado sob a licença Apache, versão 2.0 (a "licença"); Você não pode usar este trabalho, exceto em conformidade com a licença. Você pode obter uma cópia da licença no arquivo de licença ou em:

http://www.apache.org/license/license-2.0

A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído pela licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença.